Lanes
Kanban board section on plain pointer events: drag cards within and between lanes as a lifted, velocity-tilted preview while siblings re-flow FLIP-style around a placeholder, the target lane lights up, and the card springs into its slot on release. Fully keyboard operable (Space to pick up, arrows to move, Space to drop, Escape to cancel) with live-region announcements, per-lane WIP limits that turn the header amber, and controlled or uncontrolled state.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/lanesManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| lanes | LanesLane[] | Controlled board value. Pair with onLanesChange; if you never feed the change back in, cards spring back to where they came from. | |
| defaultLanes | LanesLane[] | a built-in sample sprint board | Initial board for uncontrolled use. |
| onLanesChange | (lanes: LanesLane[], detail: LanesMoveDetail) => void | Fires after every committed move with the full next board + move detail. | |
| accentColor | string | "#a5b4fc" | The single accent used for the drop-target lane, the placeholder slot, the lifted card's edge and focus rings. Any CSS color. |
| label | string | "Board" | Accessible name for the board region. |
| ref | React.Ref<LanesHandle> | Imperative handle — moveCard(), getLanes(). | |
| className | string |
Honors prefers-reduced-motion with a designed static fallback, and passes className through.