Booking Confirmed

Booking25: Booking Confirmed

A confirmation screen with an accent eyebrow, a two-column hairline table of the appointment details, a checked list of what to bring and a sticky tile floating the live phone view the member also receives.

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

Base UI flavor

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

This installs the block to components/beste/block/booking25.tsx, the browser35 phone-frame piece it floats on the tile (installed to components/beste/piece/browser35.tsx), and the badge23 and button21 components it uses for the eyebrow and the actions.

Quick start

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

import { Booking25, booking25Demo } from "@/components/beste/block/booking25";

export default function ConfirmedPage() {
  return <Booking25 {...booking25Demo} />;
}

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

import { Booking25 } from "@/components/beste/block/booking25";
import { Browser35 } from "@/components/beste/piece/browser35";

export default function ConfirmedPage() {
  return (
    <Booking25
      badge={{ label: "Confirmed" }}
      heading="You are booked in for Wednesday at nine"
      description="A confirmation is on its way to your email and phone."
      details={[
        { label: "When", value: "Wednesday 14 May, 09:00" },
        { label: "With", value: "Dr Amelia Frost" },
        { label: "Reference", value: "SIR-4821" },
      ]}
      bringTitle="Worth bringing"
      bring={["Your referral letter, if you have a paper copy", "A list of anything you take"]}
      media={
        <Browser35
          time="09:41"
          title="Appointment"
          status="Confirmed"
          headline="Wednesday, 14 May · 09:00"
          rows={[{ label: "With", value: "Dr Amelia Frost" }]}
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      changeTitle="Need to change it?"
      changeBody="Move or cancel from the same link, at any hour, without ringing anyone."
      buttons={[
        { label: "Add to calendar", href: "/calendar.ics" },
        { label: "Move this appointment", href: "/booking/move" },
      ]}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

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

Behavior notes

• The eyebrow is the one place in this block the accent appears, through Badge23's tone="primary". Everything else stays in the neutral palette, which is what keeps a success state from shouting.
• The details list is a real dl in a two-column grid from sm, filling column by column, so an odd number of details leaves the gap at the end rather than mid-table.
• Both the details and the bring list use border-t with no closing rule, so they read as continuing rather than as closed tables.
• The right column is lg:sticky lg:top-24 lg:self-start. The self-start is required, otherwise the column stretches to the row height and has nothing to travel within. Adjust top-24 to match your own fixed header.
• The tile shows the same information the member receives on their phone, which is why the demo repeats the reference in both. Keeping the two in sync is on you, since the block does not derive one from the other.
• Button tones are positional and not overridable: the first is primary, later ones are outline.
• Nothing here is interactive. Calendar and reschedule actions are links, so the block stays a pure confirmation view.