Table Reservation Form

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot 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/food/food15.tsx instead.

Usage

The file also exports food15Demo, 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 { Food15, food15Demo } from "@/components/blocks/food/food15";

export default function Page() {
  return <Food15 {...food15Demo} />;
}

Props

Behavior notes

• Date, time slot, and guest count are real client state (useState): the native date input is controlled, exactly one time-slot pill can be selected at a time (aria-pressed reflects the active pill), and the guest-count stepper is clamped between 1 and maxGuests.
• There is no Select/Checkbox primitive in this repo's UI kit, so the time slots are hand-written toggle buttons rather than a native <select>.
• Name, phone, email, and special-request fields are plain uncontrolled inputs with no validation.
• The submit button is decorative and inert: there is no real reservations backend wired up, so it has no onClick/form submit handler, matching every other booking CTA in this category.