data contract
KanbanColumn
Single vertical column of cards in a Kanban board.
Variants
- default
- collapsed
- Header only — for narrow viewports
Sizes
- sm
- 280pt wide
- md
- 320pt wide
Slots
- header
- Title + count + add button
- cards
- footer
- Add card affordance
Example
<KanbanColumn title="In progress" count={cards.length}>{cards.map((c) => <KanbanCard key={c.id} {...c} />)}</KanbanColumn>Usage rule
Drag-and-drop within and between columns; use HTML5 DnD or dnd-kit, not custom mouse logic.
The full KanbanColumn contract has 4 more rules, plus the do-not patterns. Get the full recipe.