Kanban board
Operator's view of the mission queue. Drag cards across columns, reorder within columns, and manage columns via the kebab menu.
Included in the single kansho full pack. Components are not offered as separate installs.
Interactive board — drag & drop + column management
Drag cards between columns · use kebab menu to rename, reorder, or delete columnsCompact, no toolbar
Static preview — no DnDAccessibility
Keyboard & screen readerKeyboard
- Tab
- Move focus to a card or the column kebab (visible on focus).
- Space
- Lift the focused card; press again to drop it.
- Arrow keys
- Move a lifted card up, down, or across columns.
- Escape
- Cancel a lift and return the card to its origin.
- Enter
- Open the focused column's kebab menu; select an item.
Announces
- Card lift, move target, and drop position are announced live.
- Column rename, reorder, and delete actions are announced.
Not supported
- Touch / mobile drag-and-drop — this is a desktop-first kit.
Props
API reference| Component | Prop | Type | Description |
|---|---|---|---|
| KanbanBoard | onCardMove | (cardId, from, to, index) => void | Fires when a card is dropped in a new position. |
| KanbanBoard | findCard | (id) => CardData | undefined | Resolves a card by id for the drag overlay preview. |
| KanbanBoard | findCardColumn | (id) => string | undefined | Returns which column a card is in (for cross-column drops). |
| KanbanColumn | onRename | (name) => void | Inline rename callback. |
| KanbanColumn | onDelete | () => void | Opens the delete-column confirmation dialog. |
| KanbanColumn | onMoveLeft / onMoveRight | () => void | Reorder column via menu. Disabled at ends. |
| DeleteColumnDialog | onConfirm | (destId | null) => void | Returns the destination column id, or null if the column was empty. |
Component documentation
Kanban Board
components/board/kanban-board.tsxPurpose
Coordinates horizontal board layout and pointer or keyboard card dragging across columns.
Appropriate use
Use as the root around KanbanColumn children when the host owns card and column data.
Example
components/board/kanban-board.tsx has a representative live example in the "Interactive board — drag & drop + column management" section on /components/kanban-board.
States
Supports idle, active drag, cross-column target, overlay, toolbar, and optional add-column states; card movement is emitted only when destination data resolves.
API and props
KanbanBoard accepts children, onAddColumn, onCardMove, onColumnReorder, onColumnDelete, onColumnRename, toolbar, findCard, findCardColumn, and className; it also exports useKanbanBoardContext.
Dependencies
Direct imports are React, Lucide icons, dnd-kit core and sortable utilities, Button, KanbanCard, and cn.
Accessibility
Pointer and keyboard sensors are enabled; Space starts or ends keyboard drag, Escape cancels, and human card titles are used in drag announcements when findCard is provided.
Limitations
The board owns transient drag state only; callers must reorder data. The declared column reorder, delete, and rename props are not consumed by KanbanBoard, so callers must wire those callbacks directly to KanbanColumn.
Source
Source: components/board/kanban-board.tsx.
Full pack
components/board/kanban-board.tsx is documented at /components/kanban-board and installs only through the single Kansho full pack; no individual component install is offered.