Installation
pnpm dlx shadcn@latest add @diceui/kanbanLayout
Import the parts, and compose them together.
import {
Kanban,
KanbanBoard,
KanbanColumn,
KanbanColumnHandle,
KanbanItem,
KanbanItemHandle,
KanbanOverlay,
} from "@/components/ui/kanban";
return (
<Kanban>
<KanbanBoard>
<KanbanColumn>
<KanbanColumnHandle />
<KanbanItem>
<KanbanItemHandle />
</KanbanItem>
</KanbanColumn>
</KanbanBoard>
<KanbanOverlay />
</Kanban>
)Every part accepts a render prop, so a column or item can be composed with your own element or component instead of the default div.
<KanbanColumnHandle render={<Button variant="ghost" size="icon" />}>
<GripVertical />
</KanbanColumnHandle>Usage
With Primitive Values
When using primitive arrays (strings, numbers), the getItemValue prop is optional. The component will automatically use the items themselves as unique identifiers.
const [columns, setColumns] = React.useState({
todo: ["Task 1", "Task 2"],
done: ["Task 3"],
});
<Kanban value={columns} onValueChange={setColumns}>
<KanbanBoard>
{Object.entries(columns).map(([columnValue, items]) => (
<KanbanColumn key={columnValue} value={columnValue}>
{items.map((item) => (
<KanbanItem key={item} value={item}>
{item}
</KanbanItem>
))}
</KanbanColumn>
))}
</KanbanBoard>
</Kanban>With Object Arrays
When using object arrays, the getItemValue prop is required to extract unique identifiers from each item.
const [columns, setColumns] = React.useState({
todo: [
{ id: 1, title: "Task 1" },
{ id: 2, title: "Task 2" },
],
done: [
{ id: 3, title: "Task 3" },
],
});
<Kanban
value={columns}
onValueChange={setColumns}
getItemValue={(item) => item.id}
>
<KanbanBoard>
{Object.entries(columns).map(([columnValue, items]) => (
<KanbanColumn key={columnValue} value={columnValue}>
{items.map((item) => (
<KanbanItem key={item.id} value={item.id}>
{item.title}
</KanbanItem>
))}
</KanbanColumn>
))}
</KanbanBoard>
</Kanban>Examples
With Dynamic Overlay
Display a dynamic overlay when an item or column is being dragged.
API Reference
Kanban
The main container component for kanban board functionality.
Prop
Type
KanbanBoard
Container for kanban columns.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-orientation] | "horizontal" | "vertical" |
KanbanColumn
Individual kanban column component.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when the column is disabled. |
[data-dragging] | Present when the column is being dragged. |
KanbanColumnHandle
A button component that acts as a drag handle for kanban columns.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when the column is disabled. |
[data-dragging] | Present when the parent column is being dragged. |
KanbanItem
Individual kanban item component.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when the item is disabled. |
[data-dragging] | Present when the item is being dragged. |
KanbanItemHandle
A button component that acts as a drag handle for kanban items.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when the item is disabled. |
[data-dragging] | Present when the parent item is being dragged. |
KanbanOverlay
The overlay component that appears when an item or column is being dragged.
Prop
Type
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| EnterSpace | Picks up the kanban item or column for reordering when released, and drops it in its new position when pressed again. |
| ArrowUp | Moves the kanban item up in vertical orientation. |
| ArrowDown | Moves the kanban item down in vertical orientation. |
| ArrowLeft | Moves the kanban item left in horizontal orientation. |
| ArrowRight | Moves the kanban item right in horizontal orientation. |
| Esc | Cancels the drag operation and returns the item or column to its original position. |