availability picker

Schedule / Availability Picker

Schedule / Availability Picker

Weekly time-slot grid for selecting recurring availability.

Preview

TimeMonTueWedThuFriSatSun
8:00
9:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
Selected slots: 0

Features

  • Weekly hour grid.
  • Toggle slots on click.
  • Controlled output array for forms.

Installation

npx shadcn@latest add https://www.shadcn-form.com/registry/availability-picker.json

Registry JSON: /registry/availability-picker.json

Usage

import { AvailabilityPicker } from '@/components/ui/availability-picker'


<AvailabilityPicker value={slots} onChange={setSlots} />