Kanban
A horizontal, column-per-stage board. Named parts for RSC compatibility. This version is presentational: horizontal scroll plus column-level tone tinting, so a column reads its overall state at a glance. Drag-and-drop is out of scope and can layer on later without changing this structure.
To do2
Design onboarding email
Design
Draft Q3 roadmap
In review1
Billing migration
Done1
Ship search filters
<KanbanBoard> <KanbanColumn title="To do" count={2}> <KanbanCard>Design onboarding email</KanbanCard> <KanbanCard>Draft Q3 roadmap</KanbanCard> </KanbanColumn> <KanbanColumn title="In review" count={1} tone="warning"> <KanbanCard accent="warning">Billing migration</KanbanCard> </KanbanColumn> <KanbanColumn title="Done" count={1} tone="success"> <KanbanCard accent="success">Ship search filters</KanbanCard> </KanbanColumn></KanbanBoard>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
KanbanColumn.title | ReactNode | — | Column heading. |
KanbanColumn.count | number | — | Count beside the title. |
KanbanColumn.meta | ReactNode | — | Small note under the title. |
KanbanColumn.tone | BadgeTone | 'neutral' | Column wash colour. |
KanbanCard.accent | BadgeTone | — | Left accent stripe on the card. |