Kanban Board
Multi-column drag-and-drop board with cross-column transfers, collapsible columns, tag support, and inline add-item forms.
Backlog
2Research competitor features
DesignWrite migration script
DevTo Do
3Design card component
DesignFix dropdown z-index
BugWrite API docs
DocsIn Progress
2Build sidebar nav
DevUpdate color tokens
DesignDone
3Set up project
DevCreate theme provider
DevInitial wireframes
DesignInstallation
npx shadcn@latest add https://wise-ui.com/r/kanban-board.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | KanbanColumn<T>[] | - | Array of columns, each with `id`, `title`, and `items`. |
| onColumnsChange | (columns) => void | - | Called when items are reordered or moved between columns. |
| renderItem | (item: T, columnId: string) => ReactNode | - | Render function for each item card. |
| onAddItem | (columnId: string, title: string, tagId?: string) => void | - | Called when a new item is added via the inline form. Shows add button if provided. |
| getItemTagId | (item: T) => string | undefined | - | Extract the tag id from an item. Required for the tag filter bar to appear. |
| tags | KanbanTag[] | - | Available tags shown in the add-item form. Each tag has `id`, `label`, and optional `color` class. |
| collapsible | boolean | true | Whether columns can be collapsed to a narrow strip. |
| minColumnWidth | number | 200 | Minimum width of each expanded column. Columns flex to fill available space. |
| collapsedColumnWidth | number | 44 | Width of each collapsed column in pixels. |
| className | string | - | Class applied to the board container. |
| columnClassName | string | - | Class applied to each column. |