Board Card
The card, column, and meta row that a kanban board is assembled from.
Design system update
Enhance component consistency and usability
Dragging is a look, not a behaviour
state="dragging" styles a lifted card and nothing more — no drag handling, no drop targets. Wire that up yourself (the Kanban Board block shows one way with native HTML5 drag events), which is what keeps dnd-kit or react-dnd a drop-in choice rather than a fight.
Card types
KYC flow review
Icon library audit
Normalize stroke widths across 1,600 glyphs
Columns
In progress2
Icon library audit
Search performance
Empty and loading columns
Done0
Drop tasks here
Backlog
BoardCard props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | Card title. Required. | |
| type | 'compact' | 'default' | 'cover' | 'default' | Compact drops description and tags; cover adds media on top. |
| state | 'default' | 'hover' | 'selected' | 'dragging' | 'done' | 'default' | Presentational only — dragging styles the card but implements no drag behaviour. |
| leading | ReactNode | Identity slot: checkbox, avatar, status dot. | |
| trailing | ReactNode | Priority icon, menu trigger, or status. | |
| description | ReactNode | Body copy. Default and cover types. | |
| tags | ReactNode | Badge elements. Default and cover types. | |
| meta | ReactNode | CardMetaItem elements, e.g. due date and comment count. | |
| assignees | ReactNode | Avatar or AvatarGroup, right-aligned in the footer. | |
| cover | ReactNode | Cover media, for type="cover". |
BoardColumn props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | Column heading. | |
| count | ReactNode | Count beside the title — a number or a Badge. | |
| dotColor | string | var(--color-chart-1) | Status dot colour. Any CSS colour, so prefer a chart token over a literal hex. |
| state | 'default' | 'empty' | 'loading' | 'default' | Empty shows a drop zone; loading shows card skeletons. |
| children | ReactNode | BoardCard elements. | |
| onAdd / onMenu | () => void | The + and ⋯ buttons in the header. |
CardMetaItem props
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | A 13px icon element. | |
| children | ReactNode | The value beside it. |