Components
Kanban
UI Library:
A drag-and-drop kanban component designed for seamless item organization across customizable columns.
Installation
pnpm dlx shadcn@latest add @toui/kanban
Examples
Overlay
API Reference
The Kanban component is a flexible drag-and-drop board for organizing items in columns. Below is the complete API reference:
Kanban
The root Kanban component includes the following props:
| Prop | Type | Default |
|---|---|---|
value | ||
onValueChange | ||
getItemValue | ||
children | ||
className | ||
onMove |
KanbanColumn
A draggable column in the Kanban board.
| Prop | Type | Default |
|---|---|---|
value | ||
className | ||
children | ||
disabled |
KanbanColumnHandle
A drag handle for a column.
| Prop | Type | Default |
|---|---|---|
asChild | ||
className | ||
children | ||
cursor |
KanbanItem
A draggable item in a column.
| Prop | Type | Default |
|---|---|---|
value | ||
asChild | ||
className | ||
children | ||
disabled |
KanbanItemHandle
A drag handle for an item.
| Prop | Type | Default |
|---|---|---|
asChild | ||
className | ||
children | ||
cursor |
KanbanColumnContent
A wrapper for the items in a column.
| Prop | Type | Default |
|---|---|---|
value | ||
className | ||
children |
KanbanOverlay
A custom overlay for the dragged item or column.
| Prop | Type | Default |
|---|---|---|
className | ||
children |
Credits
- Built with DndKit.