Restaurant Reservation

Booking6: Restaurant Reservation

A single-card restaurant reservation flow: a header with restaurant name, cuisine, location, and rating badge sits above a stepper guest counter, a 7-day horizontal date strip, a 4-column time-slot grid that greys out blocked slots, an optional seating-preference row (indoor/outdoor/bar), a special-requests textarea, and a sticky footer that summarizes the current pick behind a disabled-until-time "Reserve Table" button.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/booking6?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/booking6?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/booking6.tsx, plus the badge and button shadcn/ui primitives it uses for the rating/large-party badges and the reserve button.

Quick start

The installed file exports booking6Demo alongside the block: the exact props behind the preview above. Spread it to get a working reservation card in one line.

import { Booking6, booking6Demo } from "@/components/beste/block/booking6";

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

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Sofa, TreePine, Wine } from "lucide-react";
import { Booking6 } from "@/components/beste/block/booking6";

export default function ReservationPage() {
  return (
    <Booking6
      badge={{ label: "Tonight's tables", variant: "secondary" }}
      heading="Reserve your <strong>table</strong>"
      restaurantName="La Maison Dorée"
      cuisine="French Fine Dining"
      rating={4.8}
      location="24 Rue de Rivoli, Paris"
      timeSlots={["18:00", "18:30", "19:00", "19:30", "20:00"]}
      unavailableSlotsByDate={{ "2026-04-14": ["19:30", "21:00"] }}
      seatingOptions={[
        { value: "indoor", label: "Indoor", icon: Sofa },
        { value: "outdoor", label: "Outdoor", icon: TreePine },
        { value: "bar", label: "Bar", icon: Wine },
      ]}
      labels={{ guestsLabel: "Guests", reserveButton: "Reserve Table" }}
    />
  );
}

Props

type SeatingOption = {
  value: string;
  label: string;
  icon: LucideIcon;
};

type Booking6Labels = {
  guestsLabel?: string;
  dateLabel?: string;
  timeLabel?: string;
  seatingLabel?: string;
  requestsLabel?: string;
  requestsPlaceholder?: string;
  todayLabel?: string;
  guestSingular?: string;
  guestPlural?: string;
  largePartyBadge?: string;
  reserveButton?: string;
};

Behavior notes

• The date strip is not driven by props: it always renders the next 7 days computed from new Date() at render time, with index 0 labelled by todayLabel; unavailableDates and unavailableSlotsByDate are matched against the derived YYYY-MM-DD keys, so hardcoded ISO dates only align with slots when they happen to fall within that 7-day window.
• All selection is held in internal useState (guests, selectedDateIndex, selectedTime, seating, specialRequest) and never lifted out; there is no onChange or onReserve callback, so the current picks are not observable from the parent.
• The guest stepper is clamped to a range of 1 through 12, and the largePartyBadge only appears once guests is 6 or more (and the label is provided).
• Selecting a different date resets selectedTime back to null, so a previously chosen time is cleared whenever the date changes.
• Time slots listed in unavailableSlotsByDate for the active date are disabled and rendered with a line-through; the selected date's blocked set is recomputed each render from unavailableSlotsByDate[selectedDate.key].
• The seating grid picks its column count from the option count (grid-cols-2/3/4 for 2, 3, or 4 options); other counts fall back to the base single-column grid, and seating defaults to the first option's value.
• heading is injected via dangerouslySetInnerHTML so inline <strong> renders as bold primary-colored text; pass only trusted markup.
• The "Reserve Table" button stays disabled until a time is selected; clicking it only runs console.log("Reservation:", { ... }), so persisting the reservation is left to the integrator.