Kanban
A kanban board is a visual tool that helps you manage and visualize your work. It is a board with columns, and each column represents a status, e.g. "Backlog", "In Progress", "Done".
Powered by
Installation
npx kibo-ui@latest add kanban
Features
- Drag and drop features between columns
- Customize the card contents
Examples
Simple version
Props
The Kanban component is made up of the following subcomponents:
KanbanProvider
The KanbanProvider component is the root component of the Kanban board. It contains the drag-and-drop context and provides the necessary context for the other components.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | - |
onDragEnd | (event: DragEndEvent) => void | - |
className | string | - |
KanbanBoard
The KanbanBoard component is a container for the columns of the Kanban board.
| Prop | Type | Default |
|---|---|---|
id | string | - |
children | ReactNode | - |
className | string | - |
KanbanHeader
The KanbanHeader component is a container for the column headers of the Kanban board.
| Prop | Type | Default |
|---|
KanbanCards
The KanbanCards component is a container for the cards of the Kanban board.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | - |
className | string | - |
KanbanCard
The KanbanCard component is a single card in the Kanban board.
| Prop | Type | Default |
|---|---|---|
id | string | - |
name | string | - |
index | number | - |
parent | string | - |
children | ReactNode | - |
className | string | - |