Cinema Seat Picker

Booking18: Cinema Seat Picker

An interactive cinema seat picker: a centered card with a movie header, a gradient screen indicator, a row-by-row seat matrix with an aisle gap and tier-based per-row pricing (standard/premium/VIP), toggleable available seats and disabled taken seats, an available/selected/taken legend, and a sticky footer that live-sums the current selection into a per-tier breakdown, a running total, and a "Book seats" 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/booking18?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/booking18.tsx, plus the badge and button shadcn/ui primitives it uses for the section eyebrow and the footer book button.

Quick start

The installed file exports booking18Demo alongside the block: the exact props behind the preview above. Spread it to get a working seat picker in one line.

import { Booking18, booking18Demo } from "@/components/beste/block/booking18";

export default function SeatSelectionPage() {
  return <Booking18 {...booking18Demo} />;
}

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

import { Booking18 } from "@/components/beste/block/booking18";

export default function SeatSelectionPage() {
  return (
    <Booking18
      badge={{ label: "Now showing", variant: "secondary" }}
      heading="Pick your <strong>seats</strong>"
      movieTitle="Dune: Part Three"
      showtime="Tonight · 20:30 · Hall 4"
      currency="$"
      rows={["A", "B", "C", "D"]}
      columns={10}
      aisleAfter={5}
      takenSeats={["A-3", "B-7", "C-2"]}
      tierConfig={[
        { value: "standard", label: "Standard", price: 12 },
        { value: "premium", label: "Premium", price: 18 },
        { value: "vip", label: "VIP", price: 26 },
      ]}
      rowTiers={{ A: "standard", B: "standard", C: "premium", D: "vip" }}
      labels={{ screenLabel: "Screen", totalLabel: "Total", bookButton: "Book seats" }}
    />
  );
}

Props

type SeatTier = "standard" | "premium" | "vip";

type SeatTierConfig = {
  value: SeatTier;
  label: string;
  price: number;
};

type Booking18Labels = {
  screenLabel?: string;
  seatsLabel?: string;
  availableLegend?: string;
  selectedLegend?: string;
  takenLegend?: string;
  noSelection?: string;
  totalLabel?: string;
  bookButton?: string;
};

Behavior notes

• Seat selection lives in an internal useState<Set<string>> keyed by `${rowLabel}-${col}` ids; it is never lifted out, so there is no onChange/onSelect prop to observe the current picks from outside.
• Clicking a taken seat is a no-op: toggleSeat returns early when the id is in takenSet, and the button is also disabled, so occupied seats can never be selected.
• The footer total is computed by looking up each selected seat's row in rowTiers, then its price in tierConfig; a seat whose row has no rowTiers entry contributes nothing to the total and nothing to the per-tier breakdown.
• The "Book seats" button is disabled while selected.size === 0; clicking it only calls console.log("Seat booking:", ...), so persisting or advancing the booking is left to the integrator.
• heading is rendered via dangerouslySetInnerHTML, and inline <strong> inside it is styled bold and in the primary color.
• The aisle gap is purely visual: a seat gets an extra left margin only when col === aisleAfter + 1, so setting aisleAfter beyond columns simply produces no gap.
• The seat matrix sits in an overflow-x-auto container, so wide rows/columns combinations scroll horizontally rather than shrinking the seats; VIP-tier available seats also get a decorative primary ring.
• The labels.seatsLabel field exists on the Booking18Labels type but is not consumed anywhere in the render, so setting it has no effect.
• The header, badge/heading/description block, movie header row, and each legend/tier chip are conditionally rendered, so omitting their props cleanly removes that piece of chrome.