Session Request

Booking30: Session Request

A session request built as a conversation rather than a checkout: contact lines, practitioner avatars and a reassurance on one side, and on the other a form where session type and preferred time are picked as pills instead of dropdowns.

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

Base UI flavor

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

This installs the block to components/beste/block/booking30.tsx, the shadcn input, label, and textarea primitives the form is built on, and the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Booking30, booking30Demo } from "@/components/beste/block/booking30";

export default function Page() {
  return <Booking30 {...booking30Demo} />;
}

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

import { Booking30 } from "@/components/beste/block/booking30";

export default function Page() {
  return (
    <Booking30
      eyebrow="Book a session"
      heading="Choose a time that feels right. We will take it from there."
      description="Tell us a little about what brings you here and when you are usually free."
      contacts={[
        { label: "Email", value: "hello@beste.co" },
        { label: "Hours", value: "Monday to Friday, 9 to 18" },
      ]}
      avatars={[{ src: "/team/one.jpg", alt: "Portrait of a practitioner" }]}
      proof="Three practitioners, one of whom will read this personally."
      sessionTypes={["First conversation", "Individual therapy", "Not sure yet"]}
      timeSlots={["Mornings", "Afternoons", "Evenings"]}
      labels={{
        name: "Your name",
        email: "Email",
        sessionType: "What are you looking for?",
        time: "When are you usually free?",
        message: "Anything you would like us to know",
        submit: "Send the request",
        note: "Nothing is booked until we have spoken.",
      }}
    />
  );
}

Props

type ContactLine = {
  label: string;
  value: string;
};

type Avatar = {
  src: string;
  alt: string;
};

type FormLabels = {
  name: string;
  email: string;
  sessionType: string;
  time: string;
  message: string;
  submit: string;
  note: string;
};

Behavior notes

• Session type and time are pill buttons carrying aria-pressed, not a select or a radio group. They are single-choice toggles, so the pressed state is announced without inventing a listbox a keyboard user would then have to navigate.
• Both groups initialise from the first entry of their array, so the form opens with a sensible answer already chosen rather than in an empty state the visitor has to resolve before they can start typing.
• The pill state lives in the component and is never handed to a callback, so the chosen type and slot need wiring before they can reach your submit handler.
• Field ids come from useId, so two of these on a page keep their labels pointing at their own inputs.
• Contact lines are a dl on a three-column grid with the value spanning two, so long addresses wrap under themselves instead of pushing the label out of alignment.
• Avatars overlap with -space-x-3 and each carries a border-background ring, which is what separates them from one another rather than a gap.
• The submit button and the note under it each render only when their label is set, so a form without a note simply ends at the button.
• The form only calls preventDefault() on submit; nothing is sent anywhere until you wire it up.