Reservation Detail

Reservation card with a status pill, confirmation code, check-in/out split, party size, and total price.

Casa Mariposa · LisbonBooking #A-7812-55

Confirmed

Check-inJun 14 · After 16:00

Check-outJun 18 · Before 11:00

2 guests€736 · 4 nights

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Calendar21 } from "@/components/beste/piece/calendar21";

<Calendar21
  title="Casa Mariposa · Lisbon"
  confirmation="Booking #A-7812-55"
  partySize="2 guests"
  checkIn="Jun 14 · After 16:00"
  checkOut="Jun 18 · Before 11:00"
  total="€736 · 4 nights"
  status="confirmed"
/>