Book a time by placing a block on a day. It snaps to 15 minutes and avoids busy time.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/slot-pickerPlaygroundProduct walkthroughwith Lena Ortiz · Lisbon
BusyBusyBusy
Short dayProduct walkthroughwith Lena Ortiz · Lisbon
BusyBusyBusy
Icons animation
Fail next action
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/slot-picker
Accessibility
- The block is a vertical slider with a text value.
- Days are a radio group.
- Booked is announced.
Motion
- A dashed ghost follows the pointer.
- The block moves on a 320 and 30 spring, and tracks the pointer one to one during a drag.
- With reduced motion, the block jumps.
Responsive behavior
- 36 px per hour on Web and 40 px on Mobile.
Performance
- The block animates top and height on a spring, and follows the pointer with no spring during a drag.
- The ghost shows for a mouse only.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import
SlotPickerfrom@/components/fetaui/slot-picker. It composesButtonandToggleGroup. busyis[start, end]in decimal hours, andfromandtoset the timeline.- A day whose
freetext is exactly Full is disabled. onConfirmgets the day key, the start in decimal hours and the minutes. Return a promise to show loading until it resolves; a rejection keeps the slot and showsfailedMessage. The demo books nothing.
Related
CalendarComponentPick a date, a range, or a date and a time. Six rows always, so the height never jumps.Day StripComponentPick a day from a strip of soft capsules. The selected day grows and fills with ink.Calendar ScheduleComponentA month with its events in the grid, and the picked day's agenda beside it.Meeting FinderComponentAsk for a meeting in plain words, then compare ranked times on everyone's timeline.Timezone PlannerProBlockFind a meeting time across zones. Each ring is one person's day.