Kanban
@allem-ui/kanban
Drag-and-drop kanban board with columns, cards, labels, and assignees. Zero external drag-and-drop dependencies.
Installation
npm install @allem-ui/kanban
Basic Usage
KanbanBoard Props
| Prop | Type | Default | Description |
|---|
| columns* | KanbanColumnData[] | — | Array of column definitions with items |
| onCardMove | (cardId, fromColumnId, toColumnId, newIndex) => void | — | Called when a card is dragged to a new position |
| className | string | — | Additional CSS classes |
KanbanCard Props
| Prop | Type | Default | Description |
|---|
| id* | string | — | Unique card identifier |
| title* | string | — | Card title |
| description | string | — | Card description text |
| labels | { text: string; color: string }[] | — | Colored label badges |
| assignee | string | — | Assignee name (shows initials avatar) |
| dueDate | string | — | Due date text |
KanbanColumn Props
| Prop | Type | Default | Description |
|---|
| id* | string | — | Unique column ID |
| title* | string | — | Column heading |
| count | number | — | Item count badge |
| color | string | — | Accent color |
| onAddCard | () => void | — | Show add card button |
| onDrop | (cardId, targetColumnId, index) => void | — | Drop handler |
| className | string | — | Additional CSS classes |
KanbanHeader Props
| Prop | Type | Default | Description |
|---|
| title* | string | — | Header text |
| count | number | — | Count badge |
| color | string | — | Accent color |
| className | string | — | Additional CSS classes |
KanbanAddCard Props
| Prop | Type | Default | Description |
|---|
| onAdd | (title: string) => void | — | Called with new card title |
| className | string | — | Additional CSS classes |