Component

Slot Picker

A Calendly-style booking picker: a row of day chips and a grid of time slots for the chosen day. Distinct from Calendar/DatePicker — this selects an availability slot, not a calendar date.

Basic

Pick a day, then pick a time slot. The slot grid updates when you switch days.

Pick a day

With timezone label

Pass timezoneLabel to show the user's timezone beside the "Pick a time" heading.

Pick a day

Pick a timeEastern Time (ET)

Some slots disabled

Pass disabledSlots to mark already-booked or unavailable slots as non-interactive.

Pick a day

Pick a timePacific Time (PT)

10:00 AM and 2:00 PM are disabled (already booked).

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { SlotPicker } from '@refraction-ui/react'
import type { SlotDay, SlotSelection } from '@refraction-ui/react'

const days: SlotDay[] = [
  { id: '2024-06-10', weekday: 'Mon', dayNum: '10' },
  { id: '2024-06-11', weekday: 'Tue', dayNum: '11' },
]

const slotsByDay = {
  '2024-06-10': ['9:00 AM', '10:00 AM', '2:00 PM'],
  '2024-06-11': ['11:00 AM', '3:00 PM'],
}

export function BookingPicker() {
  const [selection, setSelection] = React.useState<SlotSelection>()

  return (
    <SlotPicker
      days={days}
      slotsByDay={slotsByDay}
      value={selection}
      onChange={setSelection}
      timezoneLabel="Eastern Time"
      aria-label="Book a time slot"
    />
  )
}

Props

Prop	Type	Default	Description
`days`	`SlotDay[]`	--	Array of day chips to render. Each item has `id`, `weekday` (short label), and `dayNum`.
`slotsByDay`	`Record<string, string[]>`	--	Map of dayId → available time-slot strings for that day.
`value`	`SlotSelection`	--	Controlled selection (`{ dayId, slot }`).
`defaultValue`	`SlotSelection`	--	Initial selection for uncontrolled usage.
`onChange`	`(selection: SlotSelection) => void`	--	Called when the user picks a day + slot pair.
`timezoneLabel`	`string`	--	Optional timezone string shown beside the "Pick a time" heading (e.g. "Eastern Time").
`disabledSlots`	`string[]`	`[]`	Slot strings that are rendered as disabled (e.g. already-booked slots).
`className`	`string`	--	Additional CSS classes to apply to the root element.