Booking Confirmation Receipt

A centered booking confirmation receipt: a success checkmark, confirmation number, a summary of the service, date, time, location, and total, a decorative QR code placeholder, and Add to calendar / Download receipt / Get directions actions, plus a note that a confirmation email was sent.

By Staaarter Team

Booking

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/booking-confirmation-receipt.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/booking/booking15.tsx instead.

Usage

The file also exports booking15Demo, 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 { Booking15, booking15Demo } from "@/components/blocks/booking/booking15";

export default function Page() {
  return <Booking15 {...booking15Demo} />;
}

Props

Prop	Type	Default	Description
confirmationNumber	string	"BK-482913"	Booking confirmation number.
heading	string	"You're all booked!"	Success heading.
description	string	"We've reserved your spot. Here's a summary of your booking."	Short subheading under the heading.
summary	Booking15SummaryRow[]	[]	Label/value rows shown in the booking summary card.
confirmationEmail	string	"[email protected]"	Email address shown in the confirmation-sent note.
className	string	none	Extra classes for the outer section element.

Types

interface Booking15SummaryRow {
  label: string;
  value: string;
}

Behavior notes

This is a static server component: the checkmark and QR code are purely decorative (the QR code is a bordered placeholder icon, not a real generated code), and Add to calendar, Download receipt, and Get directions are plain buttons with no handlers.

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.

reservation-summary

Reservation Summary

A static booking confirmation card with service, date/time, provider avatar, price breakdown, promo code field, and cancellation policy.

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.