Restaurant Reservation

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.

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

Usage

The file also exports booking6Demo, 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 { Booking6, booking6Demo } from "@/components/blocks/booking/booking6";

export default function Page() {
  return <Booking6 {...booking6Demo} />;
}

Props

Behavior notes

• The guest count stepper is real useState, clamped between 1 and 12, and the +/- buttons disable at the bounds.
• Seating preference is a real single-select state driving the pill button styling and the summary panel.
• The summary panel's guest count and seating values are derived live from state, not static text.
• The date input, time input, special-requests textarea, and 'Confirm reservation' button are decorative, no data is submitted anywhere.