Room cardhospitality
Room type card with media slot, facts, amenity summary and rate rows that carry refundability, inclusions, member price and sold-out state.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/room-cardDefault
room-card-demo.tsx
import { CoffeeIcon } from "lucide-react";import { RoomCard } from "@/components/ui/room-card";import { RateRow } from "@/components/ui/room-card-rate-row";
const deadline = Date.parse("2026-06-10T23:59:00Z");
export default function RoomCardDemo() { return ( <RoomCard name="Deluxe double" media={<div className="size-full bg-muted" />} capacity={{ base: 2, max: 3 }} bedType="1 queen bed" size={32} amenities={[ { key: "wifi", label: "Wi-Fi" }, { key: "tv", label: "TV" }, { key: "breakfast", label: "Breakfast" }, { key: "mystery", label: "Mystery" }, ]} amenityLimit={3} > <RateRow name="Flexible rate" price={18900} originalPrice={21900} currency="USD" refundable freeCancelUntil={deadline} timeZone="UTC" includes={[{ label: "Breakfast", icon: CoffeeIcon }, { label: "Late check-out" }]} memberPrice="$17.50" /> <RateRow name="Advance purchase" price={15900} currency="USD" refundable={false} /> <RateRow name="Sold-out rate" price={16900} currency="USD" refundable soldOut /> </RoomCard> );}