Meeting Room Booking

Booking10: Meeting Room Booking

A single-column coworking room reservation card: a header showing the space name, a location badge, and a three-cell summary of date, an attendee stepper, and the active duration, above a time-range tab selector, a divided list of room rows (each with capacity, equipment chips, hourly price, and a radio-style select indicator), closing on a sticky footer that prices the current pick and offers a reserve 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/booking10?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/booking10.tsx, plus the badge, button, and tabs shadcn/ui primitives it uses for the location and status badges, the reserve button, and the duration selector.

Quick start

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

import { Booking10, booking10Demo } from "@/components/beste/block/booking10";

export default function BookingPage() {
  return <Booking10 {...booking10Demo} />;
}

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

import { Monitor, Video, Wifi } from "lucide-react";
import { Booking10 } from "@/components/beste/block/booking10";

export default function BookingPage() {
  return (
    <Booking10
      badge={{ label: "Workspace", variant: "secondary" }}
      heading="Reserve your <strong>meeting room</strong>"
      spaceName="Vertex Coworking"
      location="Floor 12"
      date="April 18, 2026"
      currency="$"
      timeRanges={[
        { label: "1 hour", hours: 1 },
        { label: "Half day", hours: 4 },
      ]}
      rooms={[
        {
          name: "Focus Pod",
          floor: "12th Floor",
          capacity: 4,
          pricePerHour: 25,
          equipment: [
            { icon: Monitor, label: "Display" },
            { icon: Wifi, label: "WiFi" },
          ],
          available: true,
        },
      ]}
      labels={{ capacityPrefix: "Up to", perHourLabel: "/ hour", reserveButton: "Reserve Room" }}
    />
  );
}

Props

type MeetingRoom = {
  name: string;
  floor: string;
  capacity: number;
  pricePerHour: number;
  equipment: { icon: LucideIcon; label: string }[];
  available?: boolean;
};

type TimeRange = {
  label: string;
  hours: number;
};

type Booking10Labels = {
  dateLabel?: string;
  attendeesLabel?: string;
  durationLabel?: string;
  bookedBadge?: string;
  maxPrefix?: string;
  capacityPrefix?: string;
  perHourLabel?: string;
  noSelection?: string;
  reserveButton?: string;
};

Behavior notes

• Three pieces of state live inside the block and are never lifted out: selectedRoom (matched by room.name string, so two rooms sharing a name would both read as selected), selectedDurationIndex (defaults to 0, so the first timeRanges entry is preselected), and attendees (starts at 2).
• The attendee stepper is clamped between 1 and 30 via Math.max/Math.min; there is no callback, so the count is purely internal display and filtering state.
• A room row is disabled when available === false or when its capacity is below the current attendees count; disabled rows drop to opacity-40, hide the select indicator, and show either the bookedBadge or a `${maxPrefix} ${capacity}` warning.
• heading is rendered through dangerouslySetInnerHTML, and its inline <strong> is styled bold and text-primary.
• The footer swaps between a priced summary (pricePerHour × hours = totalPrice) when both a room and a duration are active, and the noSelection label otherwise.
• The reserve Button is disabled until a room is selected; clicking it only calls console.log("Room reservation:", {...}) with the current selection, so wiring an actual reservation is left to the integrator.
• The header, tab selector, and footer are always visible; only the room list grows with its content, and the whole card is capped at max-w-lg.