← ui-lab

Slot Picker

Select a contiguous range of slots by dragging across them — press the first, drag to the last, release (the calendar "drag to create" gesture). Arrow keys move the selection; Shift+Arrow extends it from the anchor. Try dragging over the time slots below.

Preview

  • 9:00
  • 9:30
  • 10:00
  • 10:30
  • 11:00
  • 11:30

Installation

npx shadcn@latest add https://ui.publictheta.com/r/slot-picker.json

Conformance

This component conforms to the @publictheta/ui-spec slot-picker specification. Run the suite against any implementation with pnpm conformance.