Event Ticket Booking

Booking9: Event Ticket Booking

A single-column ticket picker for one event: an optional banner image with a live-event badge, a date/time/venue info bar, a stack of selectable ticket-tier cards each listing perks and a per-ticket price, with a quantity stepper that appears on the selected tier and a sticky footer summarizing the running order total behind a book 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/booking9?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/booking9.tsx, plus the badge and button shadcn/ui primitives it uses for the event and tier badges and the footer book button.

Quick start

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

import { Booking9, booking9Demo } from "@/components/beste/block/booking9";

export default function Page() {
  return <Booking9 {...booking9Demo} />;
}

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

import { Booking9 } from "@/components/beste/block/booking9";

export default function Page() {
  return (
    <Booking9
      badge={{ label: "Tickets on sale", variant: "secondary" }}
      heading="Grab your <strong>tickets</strong>"
      description="Pick a tier and choose how many tickets you need."
      eventName="Neon Horizons Music Festival"
      eventImage="https://example.com/event.jpg"
      date="June 21, 2026"
      time="6:00 PM"
      venue="Skyline Arena"
      location="Los Angeles, CA"
      currency="$"
      tiers={[
        {
          name: "General Admission",
          price: 79,
          description: "Access to main stage and food court areas.",
          perks: [{ text: "Main stage access" }, { text: "Food & drink vendors" }],
          maxQty: 10,
          remaining: 142,
        },
        {
          name: "VIP Experience",
          price: 199,
          description: "Premium viewing area with complimentary drinks.",
          perks: [{ text: "VIP lounge & viewing deck" }, { text: "Fast-track entry" }],
          maxQty: 6,
          remaining: 38,
          highlight: true,
        },
      ]}
      labels={{ noSelection: "Select tickets to continue", bookButton: "Get Tickets" }}
    />
  );
}

Props

type TicketPerk = {
  text: string;
};

type TicketTier = {
  name: string;
  price: number;
  description: string;
  perks: TicketPerk[];
  maxQty: number;
  remaining?: number;
  highlight?: boolean;
};

type Booking9Labels = {
  liveEventBadge?: string;
  popularBadge?: string;
  perTicketLabel?: string;
  remainingSuffix?: string;
  noSelection?: string;
  bookButton?: string;
};

Behavior notes

• Tier selection is tracked by matching tier.name as a string key in internal useState, not an index or id, so two tiers sharing a name would both be treated as selected; this state is never lifted out, so the active pick is unobservable from the parent.
• Quantities live in a separate Record<string, number> state keyed by tier name and default to 0; the stepper only renders inside the currently selected card, so switching tiers hides the previous stepper but retains its count.
• The plus and minus steppers are plain <button> elements that clamp between 0 and tier.maxQty and call stopPropagation so tapping them does not re-trigger the card's select handler.
• heading supports inline <strong> markup rendered via dangerouslySetInnerHTML, styled bold and in the primary color.
• The book button is disabled until a tier is selected with quantity greater than 0; clicking it only calls console.log("Ticket purchase:", ...), so wiring an actual checkout is left to the integrator.
• The banner image, its liveEventBadge, eventName, each info-bar field, the popularBadge (shown only when a tier has highlight), and the remaining count are each conditionally rendered and drop out silently when their value is missing.
• A tier's remaining count turns red and bold when it is <= 10, otherwise it reads in muted text; the whole info line is hidden when remaining is null or undefined.
• The header block (badge, heading, description) is omitted entirely when all three are absent, and the footer shows the noSelection label until a tier and quantity are chosen.