Service And Slot PickerPRO

Booking24: Service And Slot Picker

Interactive appointment picker in one hairline panel: a selectable service list on the left, a scrollable day strip over a time slot grid that marks unavailable times in the middle, and a full-height provider photo with a gradient name card on the right, all resolving into a live summary bar and confirm action along the bottom.

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/booking24?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/booking24.tsx plus the badge23 and button21 components it uses for the eyebrow and the confirm action.

Quick start

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

import { Booking24, booking24Demo } from "@/components/beste/block/booking24";

export default function BookingPage() {
  return <Booking24 {...booking24Demo} />;
}

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

import { Booking24 } from "@/components/beste/block/booking24";

export default function BookingPage() {
  return (
    <Booking24
      badge={{ label: "Booking" }}
      heading="Pick a time that already works for the room"
      location="Marlowe Street clinic, ground floor"
      provider={{
        image: { src: "/images/priya.jpg", alt: "Portrait of Priya Anand" },
        name: "Priya Anand",
        role: "Lead clinician, intake and care plans",
        note: "Usually replies before the next working day",
      }}
      services={[
        { name: "First consultation", duration: "50 min", price: "$180" },
        { name: "Follow-up session", duration: "30 min", price: "$110" },
      ]}
      days={[
        {
          weekday: "Mon",
          day: "14",
          label: "Monday, April 14",
          slots: [
            { time: "09:00", available: true },
            { time: "09:45", available: false },
            { time: "10:30", available: true },
          ],
        },
      ]}
      labels={{
        serviceLabel: "Service",
        dateLabel: "Date",
        timeLabel: "Available times",
        emptyLabel: "Choose a day and a time to continue",
        confirmLabel: "Confirm appointment",
      }}
    />
  );
}

Props

type Service = { name: string; duration: string; price: string };

type Slot = { time: string; available?: boolean };

type Day = {
  weekday: string;
  day: string;
  label: string;
  slots?: Slot[];
};

type Provider = {
  image: { src: string; alt: string };
  name: string;
  role: string;
  note?: string;
};

type Booking24Labels = {
  serviceLabel?: string;
  dateLabel?: string;
  timeLabel?: string;
  emptyLabel?: string;
  confirmLabel?: string;
};

Behavior notes

• Selection lives in three pieces of local useState: the service index, the day index, and the chosen time string. There is no onChange or onConfirm prop, so the picker holds its own state and the integrator wires the booking call themselves.
• Picking a day resets the time to "" in the same handler. Slots belong to a day, so keeping 14:30 selected after moving to Tuesday would claim a slot that day may not offer.
• Slots are read from the selected day only (days[dayIndex].slots), and a day with no slots renders an empty grid rather than falling back to another day's times.
• A slot with available: false renders disabled, dashed, struck through, and with cursor-not-allowed, so unavailable times stay visible as information instead of disappearing from the grid.
• The summary line is derived, not stored: it joins the selected service name, the day's label, and the time, and falls back to labels.emptyLabel until a time is picked. Service and day are preselected, so only the time gates it.
• The layout regroups twice: one column on mobile with the photo band on top, service and picker side by side from md, and the three-column arrangement with the photo as a full-height right column from lg.
• The confirm button is a plain Button21 with no click handler and no disabled state; it renders whenever labels.confirmLabel is set, whether or not a time has been chosen.