Hotel cardPro

A stay in a message: photos, dates and room, the total behind the nightly price, and how long refunds last.

Markdown

On this page

ProThree nights in Lisbon: swipe the photos, open the total, and see how long free cancellation lasts.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/hotel-card

Usage

tsx

import { HotelCard } from "@/components/ui/chatcn/pro/hotel-card"

<HotelCard
  name="Casa do Miradouro"
  area="Alfama, Lisbon"
  photos={rooms}
  checkIn="2026-11-19"
  checkOut="2026-11-22"
  nightly={186}
  taxes={54.6}
  cancellation={[{ until: "2026-11-15T23:59", refund: "full" }, { until: "2026-11-18T12:00", refund: "partial" }]}
  onReserve={() => booking.reserve("miradouro")}
/>

The cancellation timeline is the part a listing never shows: a bar from now to check-in in green while a full refund lasts, amber while half does and gray after, with the dates under it and one sentence over it that says where you stand today. The nightly price leads, Total opens the sums (nights, taxes, total), and when searchedNightly differs the card says how much the price moved since the search. Photos snap one at a time with arrows on hover and dots for position. soldOut greys the photo and offers nothing to buy.

Examples

States

ProHalf refund window with a failed booking, sold out, no photos and no refund, loading, error.

Props

Prop	Type	Notes
`name`, `area`, `distance`, `stars`	`string`, `string`, `string`, `number`	Identity
`score`, `scoreWord`, `reviewCount`	`number`, `string`, `number`	Guest rating out of 10
`photos`	`{ src, alt? }[]`	Swipeable; none hides the strip
`checkIn`, `checkOut`, `guests`, `room`, `amenities`		ISO dates; one line each
`nightly`, `taxes`, `searchedNightly`	`number`	Total multiplies by the nights
`cancellation`	`{ until, refund: "full" \| "partial" \| "none" }[]`	Phases in order; the last runs to check-in
`now`	`Date`	Where today sits on the timeline
`currency`, `locale`	`string`	Prices format with `Intl`, tabular figures. Default `USD`, `en-US`
`onReserve`	`() => unknown \| Promise<unknown>`	Reject with an Error to show it
`soldOut`, `loading`, `error`, `onRetry`, `disabled`		States
`labels`	`Partial<HotelCardLabels>`	Every string, for translation

Keyboard

Key	Action
Tab	The photo strip, its arrows, Total, then Reserve
Left and Right	Scroll the photo strip when focused

Accessibility

The card is an article named by the hotel; the strip is a carousel and each photo names its position.
The timeline bar is decorative; the sentence over it and the dates carry the meaning.
Total uses aria-expanded; the booking outcome is a status message.

Motion

Photos snap with native scrolling, instantly under reduced motion. The sums and the outcome fade up 4 px in 180 ms.