KQ-507 · SLOT/GRID
Slot Grid
Appointment slots as a real grid of day columns and time rows. Free slots lift a pixel on hover with glide, taken slots are hatched and inert, and picking stamps the slot from 1.3× on recoil while the summary beneath cross-fades to the new time. Arrow keys walk the cells, Home and End jump to the ends of a row, Enter and Space pick.
KQ-507 · SLOT/GRID
Basinworks viewings
Time
Tue 14
Wed 15
Thu 16
09:00
10:00
11:00
13:00
14:00
15:00
HoldingNo slot held
Pick a viewing slot
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/slot-grid
Props
- days
- SlotDay[]
- default —
- Column headers, left to right; each needs an id and a label.
- times
- string[]
- default —
- Row labels, top to bottom.
- taken
- string[]
- default []
- "dayId:time" keys that are unavailable; those cells hatch and stop accepting picks.
- value / defaultValue
- string
- default —
- Controlled or initial "dayId:time" key. Empty means nothing is held.
- onValueChange
- (key: string) => void
- default —
- Fires with the "dayId:time" key on every pick.
- label
- React.ReactNode
- default —
- Visible group label. Omit it and pass aria-label to label the grid invisibly.
| Prop | Type | Default | Description |
|---|---|---|---|
| days | SlotDay[] | — | Column headers, left to right; each needs an id and a label. |
| times | string[] | — | Row labels, top to bottom. |
| taken | string[] | [] | "dayId:time" keys that are unavailable; those cells hatch and stop accepting picks. |
| value / defaultValue | string | — | Controlled or initial "dayId:time" key. Empty means nothing is held. |
| onValueChange | (key: string) => void | — | Fires with the "dayId:time" key on every pick. |
| label | React.ReactNode | — | Visible group label. Omit it and pass aria-label to label the grid invisibly. |