Kanban column
A vertical stack of cards with a title row, count badge, kebab menu, and an Add-card footer.
Included in the single kansho full pack. Components are not offered as separate installs.
Tone variants
Add card increments the countDemo action: none
Drop target highlight
Columns glow during drag-overDelete grammars
Card delete is frequent and reversible → undo toast. Column delete is structural → pre-confirm dialog.Included components
This page is the canonical destination for these components. All ship in the single Kansho pack.
Delete column dialog
components/board/delete-column-dialog.tsxComponent documentation
Delete column dialog
components/board/delete-column-dialog.tsxPurpose
Confirms column deletion and, when needed, collects a destination for its cards.
Appropriate use
Use at the destructive boundary of column management when the host can apply deletion and relocation.
Example
components/board/delete-column-dialog.tsx has a representative live example in the "Delete grammars" section on /components/kanban-column.
States
Closed state renders nothing; open state differs for zero cards versus one or more cards and resets the destination when the target column changes.
API and props
DeleteColumnDialog accepts open, columnName, cardCount, destinationColumns, onConfirm, and onCancel; confirmation passes a destination id or null for an empty column.
Dependencies
Direct imports are React, Lucide icons, Modal, Button, and Select.
Accessibility
Modal provides labelled dialog and focus behaviour; the destination Select has a visible label, and destructive and cancel actions are explicit.
Limitations
It does not delete or move data, report pending/failure, or prevent confirmation when a populated column has no valid destination.
Source
Source: components/board/delete-column-dialog.tsx.
Full pack
components/board/delete-column-dialog.tsx is documented at /components/kanban-column and installs only through the single Kansho full pack; no individual component install is offered.
Kanban Column
components/board/kanban-column.tsxPurpose
Adds sortable, droppable, renameable column behaviour to BoardColumnFrame.
Appropriate use
Use as a KanbanBoard child when card ids and column-management callbacks are available.
Example
components/board/kanban-column.tsx has a representative live example in the "Delete grammars" section on /components/kanban-column.
States
Supports five tones, normal and drop-target states, first/last movement bounds, inline rename, and optional add, move, and delete actions.
API and props
KanbanColumn accepts id, title, count, tone, hint, children, cardIds, onAddCard, isDropTarget, isFirst, isLast, onRename, onMoveLeft, onMoveRight, onDelete, width, and className.
Dependencies
Direct imports are React, Lucide icons, dnd-kit core and sortable, DropdownMenu, BoardColumnFrame, KanbanBoard context, and cn.
Accessibility
The column exposes dnd-kit keyboard controls; the rename input is named, menus and actions have labels, and visible titles/counts identify the lane.
Limitations
It emits management callbacks but does not persist columns or cards; deletion confirmation is supplied separately by DeleteColumnDialog.
Source
Source: components/board/kanban-column.tsx.
Full pack
components/board/kanban-column.tsx is documented at /components/kanban-column and installs only through the single Kansho full pack; no individual component install is offered.