Slot Picker

Pro

Appointment picker with a date strip over morning, afternoon and evening time slots. It shows which slots are filling up and who’s available, and offers a jump to the next open day.

Preview

Installation

npx @lumioui/cli add pro/slot-picker

Usage

import { formatSlotTime, SlotPicker } from "@/components/ui/slot-picker/slot-picker";
<SlotPicker />

Also exported: formatSlotTime.

Examples

Clinic

A GP practice booking.

Home tour

Booking a viewing from a listing.

Salon

A barbershop booking step.

API reference

Prop Type Default
days* SlotDay[] —
day string

Controlled selected day id.

 —
defaultDay string

Uncontrolled initial day id. Defaults to the first open day.

 —
onDayChange (dayId: string, day: SlotDay) => void —
value string | null

Controlled selected slot id.

 —
defaultValue string | null

Uncontrolled initial slot id.

 —
onValueChange
(slotId: string | null, slot: TimeSlot … (slotId: string | null, slot: TimeSlot | null, day: SlotDay | null) => void

Fires with the picked slot and its day (null when cleared by a day change in uncontrolled mode).

 —
groupBy "period" | "none"

period groups into morning / afternoon / evening. Default "period".

 "period"
periodLabels Partial<Record<SlotPeriod, string>>

Override group headings.

 —
columns 2 | 3 | 4

Slots per row. Default 3.

 3
hour12 boolean

12h ("9:30 am") or 24h ("09:30") default labels. Default true.

 true
showMonth boolean

Show the month above the strip. Default true.

 true
emptyText string

Copy for a day with nothing open. Default "Nothing open on this day".

 "Nothing open on this day"
hideProviders boolean

Hide providers on slots even when present (e.g. one-provider clinics).

 —
heldLabel string | null

On a picked slot with providers, the faces swap in place to this line. Pass null to keep the faces. Default "Held for you".

 "Held for you"
booked boolean

The picked slot is booked: it stamps bookedLabel, one sheen crosses, and onSettled fires after a 700ms hold.

 false
bookedLabel string

Stamp on a booked slot. Default "Booked".

 "Booked"
onSettled () => void

Fires once the booked stamp has held — resolve the screen from here.

 —
className string —