How Booking Works

Installation

pnpm dlx shadcn@latest add @cleverui/appointment-steps

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { AppointmentSteps } from '@/components/blocks/appointment-steps'

Exampletsx

'use client'

import { AppointmentSteps } from '@/components/blocks/appointment-steps'

export default function AppointmentStepsDemo() {
  return (
    <AppointmentSteps
      heading="How booking works"
      intro="New patients are always welcome. Most first visits take about 20 minutes, no rush, no surprise fees."
      steps={[
        {
          title: 'Choose a time online',
          description:
            'Pick a doctor and a slot that suits you. Same-day appointments open at 7:30 am on weekdays.',
          note: 'Have your Medicare card ready if you have one, it is not required to book.',
        },
        {
          title: 'We send a confirmation',
          description:
            'You will get an SMS with the time, clinic address, and a short intake form. Reply if you need to change anything.',
        },
        {
          title: 'Arrive a few minutes early',
          description:
            'Check in at reception on Gordon Street. If this is your first visit, we will take a brief medical history before you see the doctor.',
          note: 'Bring your Medicare card and any referral letters or recent results.',
        },
        {
          title: 'See your practitioner',
          description:
            'Your consult is private and unhurried. If you need a follow-up, we can book it before you leave.',
        },
      ]}
      cta={{ label: 'Book your first visit', href: '#book' }}
    />
  )
}

API reference

AppointmentSteps accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'How booking works'`	–
`intro`	`string`	–	one calming sentence, e.g. 'New patients are always welcome'
`steps`*	`AppointmentStep[]`	–	3–4 ordered steps; order is real content
`cta`	`{ label: string; href: string }`	–	closing action, the block's single accent

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface AppointmentStep {
  title: string
  description: string
  /** practical reassurance, e.g. 'Bring your Medicare card and any referral letters' */
  note?: string
}

Related components

Which Appointment Should I Book?

Consult types compared in plain language, length and fee in quiet figures, an honest best-for line each, and a calm not-sure fallback. A React and Tailwind decision aid for clinics.

Who You'll See

A who-you'll-see panel pairing practitioner roles, GP, practice nurse, physio, with plain one-line explanations of what each actually does, demystifying the visit before it happens.

Gentle Health FAQ

Patient FAQ in a reassuring register, honest plain-language answers to questions like will it hurt, real disclosure semantics over calm hairline rows, and an ask-us-directly phone fallback.

Before Your First Visit

First-visit checklist for new patients, what to bring and what to do beforehand in two calm columns, with an arrive-early aside. Plain-language React and Tailwind onboarding for clinics.

Practitioner Directory

Clinician cards with real credential lines, special-interest tags, and a next-available chip, the calm, plain-language way patients choose who to see.

How Video Consults Work

Video consults demystified in three calm steps, a plain-language tech-requirements note, a quiet privacy assurance line, and zero jargon. The panel that makes telehealth feel ordinary.

Frequently asked questions

How do I install the How Booking Works component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/appointment-steps`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does How Booking Works require?

How Booking Works uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme How Booking Works to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code