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

Design

Design homepage

Write docs

Build components

Setup repo

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

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

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

Prop	Type	Default	Description
title*	string	—	Header text
count	number	—	Count badge
color	string	—	Accent color
className	string	—	Additional CSS classes

Prop	Type	Default	Description
onAdd	(title: string) => void	—	Called with new card title
className	string	—	Additional CSS classes