Book Appointment

A booking flow for a page that ends in an appointment: a practitioner's portrait and contact details, their scores as stars, two small charts, and a booking panel with a strip of days, time slots in groups, a button that reads back the choice, and a confirmation that draws itself in once the booking is made.

BookAppointment is a section built from library pieces. The surface is Glass Panel (GlassBackdrop and GlassPanel), the scores are Half Stars, and the booking panel is Booking Card — a compound component that can be dropped into any panel on any page. Hand it a practitioner, some slotGroups and an onBook, and it lays the page out.

Clinic booking page

Pick a day and a time, press Book — the button stays busy while your onBook promise runs, then the check draws itself and the details rise in.

practitioner: fills the portrait, contact list, name, overall score and summary. shortName is how the confirmation refers to them; contact rows are left out when their field is missing.
slotGroups: are the times on offer, one BookingCard.Slots group per entry. Mark a slot taken to show it struck through.
Return a promise fromonBook: and the button stays busy until it settles — resolve to show the confirmation, throw to drop back to the form.
unavailable(day) => day.getDay() === 0: strikes out days with nothing free. Sundays here; feed it your real availability.
scores: render as HalfStars with fractional fill. visitReasons and activities are ChartBlocks — a donut-legend and a stacked-bar; leave either out and its panel is not drawn.

Active Color

Solid

No glass: the same booking on white cards with an ordinary shadow. The booker itself is surface-neutral, so nothing inside it changes.

Setvariant"solid": and every panel becomes a solid card; the aurora is not drawn. Days, slots and the confirmation use neutral inks that read on either surface.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Book Appointment

npx shadcn@latest add @algorize-ui/book-appointment

components/custom/blocks/BookAppointmentBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs these for you. Run them yourself only if you are adding Book Appointment to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

booking-card, chart, glass-panel and half-stars are components, not packages — the shadcn CLI installs them as source files.

npx shadcn@latest add @algorize-ui/booking-card @algorize-ui/chart @algorize-ui/glass-panel @algorize-ui/half-stars

Just the booking panel

The booking panel is its own component, Booking Card, and works inside any panel — not only this page. Give it the panel's padding so the confirmation reaches the edges.

Choosing a new day clears the slot, since availability changes with the day. The submit button is disabled until both are chosen, and once they are it reads the choice back — Book now, Wed 25 at 9:00 AM — so nobody confirms blind.

Features

Built from the library

Glass Panel for the surface, Half Stars for the scores, Chart for the donut and bar, Booking Card for the booking. Install this one item and all four come with it.

A confirmation that shows what happened

When onBook resolves, a check draws itself over the form and the day, time and place rise in beneath it. Book another clears it. It holds still under prefers-reduced-motion.

Keyboard and screen reader ready

Days and slots are radio groups with full date names; taken slots and closed days are disabled, not hidden; the busy button carries aria-busy and the confirmation is a status region.

Honest about today

The default days are built on the client, so a server render never guesses the visitor's date. They start today and page forward a week at a time — the previous arrow never reaches into the past. Pass your own days array to offer a different range.

Props Reference

BookAppointment

Prop	Type	Default	Description
`practitioner`	`Practitioner`	—	Who the page is about. See the shape below.
`slotGroups`	`{ label: string; slots: { label: string; taken?: boolean }[] }[]`	—	Times on offer, grouped, e.g. Morning and Afternoon.
`onBook`	`(booking: { day: Date; slot: string }) => void \| Promise<void>`	—	Called on confirm. Return a promise to hold the busy state; a rejection returns to the form.
`unavailable`	`(day: Date) => boolean`	—	Days with nothing free — struck through, not selectable.
`scores`	`{ label: string; value: number }[]`	`[]`	Named scores out of 5, shown as `HalfStars` under the summary.
`visitReasons`	`{ label: string; value: number }[]`	—	Shares in percent for the donut. Omit to leave the panel out.
`activities`	`{ label: string; value: number }[]`	—	Shares in percent for the stacked bar. Omit to leave the panel out.
`bookingHeading`	`string`	`"Schedule a visit"`	Heading over the booking panel.
`variant`	`"glass" \| "solid"`	`"glass"`	Frosted panels over an aurora, or solid cards with a shadow.
`aurora`	`[string, string, string]`	violet, teal, amber	The three colours washed behind the glass. Ignored by `solid`.
`className`	`string`	—	Applied to the page shell. Any other prop is spread there too.

Practitioner

Field	Type	Description
`name`	`string`	Full name for the heading, e.g. `"Dr. Priya Nair, MD"`.
`shortName`	`string`	How the confirmation refers to them, e.g. `"Dr. Nair"`. Falls back to `name`.
`specialties`	`string`	One line under the name.
`practice`	`string`	Where they work; appended to the confirmation.
`photo`, `photoAlt`	`string`	The portrait and its alt text.
`rating`, `reviews`	`number`	Overall score out of 5 and the number of reviews behind it.
`summary`	`string`	A short read of what patients say.
`location`, `phone`, `email`, `languages`	`string`	Contact rows. Each is optional; a missing one is simply not drawn. Phone and email become links.

BookingCard

The booking panel's own props — onBook, BookingCard.Days, BookingCard.Slots, BookingCard.Submit, BookingCard.Confirmation — are documented on the Booking Card page.