Reservation card with a status pill, confirmation code, check-in/out split, party size, and total price.
The import and the props worth knowing about, in one place.
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"
/>Meeting-booked card with an emerald check header, when/where/guests rows, and add to calendar plus reschedule.
Book a session
A week strip where the selection highlight glides to a new day, one of three time slots fills in, and a confirmed row with a check fades in before the flow resets.
Horizontal pill combining a relative label, weekday, mono date, and an optional time separated by thin rules.
Compact month summary pill with today tile on the left, a dotted event indicator, and a plus button.