- Components24
- Autocomplete
- Location Input
- Signature Input
- Signature Pad
- Credit Card
- Masked Input
- Color Picker
- Tag / Token Input
- Emoji Picker
- Transfer List
- Tree Select
- Image Upload / Dropzone
- Cron Expression Builder
- Inline Editable Field
- Sortable List Input
- Schedule / Availability Picker
- Phone Input
- Datetime Picker
- Smart Datetime Input
- File Upload
- Tags Input
- Multi Select
- Password Input
- Rating
Schedule / Availability Picker
Weekly time-slot grid for selecting recurring availability.
Schedule / Availability Picker
Weekly time-slot grid for selecting recurring availability.
Preview
| Time | Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|---|
| 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/r/availability-picker.json
The CLI installs every dependency listed in the registry item.
Usage
import { AvailabilityPicker } from '@/components/ui/availability-picker'<AvailabilityPicker value={slots} onChange={setSlots} />