Reservation Summary
A reservation confirmation summary card: a service name with an icon, date and time, provider info shown with an avatar and initials fallback, a static price breakdown (subtotal, tax, promo discount, total), a decorative promo code field with an Apply button, cancellation policy copy, and a Confirm booking button.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/reservation-summary.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/booking/booking2.tsx instead.
Usage
The file also exports booking2Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Booking2, booking2Demo } from "@/components/blocks/booking/booking2"; export default function Page() { return <Booking2 {...booking2Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| serviceName | string | "Chef's Tasting Menu, Table for 4" | Name of the reserved service. |
| date | string | "Sat, Aug 15" | Reservation date as a plain string. |
| time | string | "7:30 PM" | Reservation time as a plain string. |
| providerName | string | "Elena Marchetti" | Name of the host/provider. |
| providerRole | string | "Host, Lumen Kitchen" | Role or business line shown under the provider name. |
| providerAvatarUrl | string | none | Avatar image URL for the provider; falls back to initials if it fails to load. |
| priceLines | Booking2PriceLine[] | none | Ordered list of price breakdown line items shown above the total. |
| total | string | "$224.80" | Final total amount, shown as its own bold line. |
| cancellationPolicy | string | none | Cancellation policy paragraph shown near the bottom of the card. |
| className | string | none | Extra classes for the outer section element. |
Types
interface Booking2PriceLine { label: string; amount: string; }
Behavior notes
- This is a plain Server Component: every value shown (price breakdown, date/time, provider info) is static data passed in as props, nothing is computed client-side.
- The promo code input and its Apply button, and the Confirm booking button, are plain elements with no event handlers wired, since a Server Component can never carry a client event handler and none of these actions have a real backend to call.
More Booking Blocks
View all →date-time-picker
Date & Time Picker
Split-panel scheduler: a real monthly calendar on the left, morning/afternoon time slots on the right, and a live booking summary footer.
appointment-list
Appointment List
Upcoming and past appointments grouped by date, with provider avatar, status badge, and reschedule/cancel actions.
service-selector
Service Selector
Category-tabbed grid of bookable services with icon, description, duration, and price.
provider-picker
Provider Picker
A selectable grid of staff/provider cards with rating, reviews, availability, and an Any Provider fallback.
restaurant-reservation
Restaurant Reservation
Table reservation form with a guest stepper, date/time inputs, seating pills, and a live summary panel.
hotel-room-booking
Hotel Room Booking
Selectable room cards with photos and amenities, plus check-in/out dates and a live-computed total.