KQ-563 · LANE/BOARD
Lane Board
A board whose columns make room. Lifting a card takes it out of its lane on flick, the lane under the pointer opens a placeholder of exactly that card's height which travels between lanes on glide while the cards around it re-flow, and letting go settles the card from where the hand left it into the slot on snap as both lanes' counts roll. The pointer is captured only after 4px of travel, and every card is a menu button whose four moves — a lane left, a lane right, a place up, a place down — are reachable from the keyboard and announced.
Press Enter to open this card's move menu, then arrow keys to pick a move and Escape to close.
Drag a card, or open one for its moves
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/lane-board
Props
- lanes
- { id: string; title: string; cards: { id: string; title: string; tag?: string }[] }[]
- default —
- Seeds the board; it owns card placement after that and reports via onMove.
- onMove
- (cardId: string, toLane: string, index: number) => void
- default —
- Fires on a drop or a keyboard move, with the index the card landed on.
- label
- React.ReactNode
- default —
- Visible board label. Omit it and pass aria-label to name the board invisibly.
| Prop | Type | Default | Description |
|---|---|---|---|
| lanes | { id: string; title: string; cards: { id: string; title: string; tag?: string }[] }[] | — | Seeds the board; it owns card placement after that and reports via onMove. |
| onMove | (cardId: string, toLane: string, index: number) => void | — | Fires on a drop or a keyboard move, with the index the card landed on. |
| label | React.ReactNode | — | Visible board label. Omit it and pass aria-label to name the board invisibly. |