KQ-348 · FOCUS/RAIL
Focus Rail
The primitive behind expanding galleries and team panels: a row of panels where the one under the pointer, or holding focus, grows on a spring while its siblings contract in place. Leaving the rail always restores an expanded panel, because a rail with nothing open reads as broken. Hover expands by default; a press mode waits for a click or Enter, and the keyboard roves either way.
KQ-348 · FOCUS/RAIL
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/focus-rail
Props
- items
- FocusRailItem[]
- default —
- Panels in order; each carries an id, a label, and optional detail content.
- activeId
- string
- default —
- Controlled active panel; omit to let the rail manage it.
- grow
- number
- default 2.4
- Flex weight of the expanded panel.
- expandOn
- "hover" | "press"
- default "hover"
- Whether hovering expands, or only a press.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | FocusRailItem[] | — | Panels in order; each carries an id, a label, and optional detail content. |
| activeId | string | — | Controlled active panel; omit to let the rail manage it. |
| grow | number | 2.4 | Flex weight of the expanded panel. |
| expandOn | "hover" | "press" | "hover" | Whether hovering expands, or only a press. |