Animated
A SaaS composite for kanban-style task management. Uses @dnd-kit for drag-and-drop with DndContext and SortableContext. Renders horizontal columns with droppable card lists, each showing title, description, label badges, and assignee Avatar. Supports WIP limits, custom card renderers, and cross-column drag.
Task board
import { KanbanBoard } from '@primstack/ui/kanban'
<KanbanBoard
columns={[
{ id: 'todo', title: 'To Do', color: '#3b82f6' },
{ id: 'doing', title: 'In Progress', color: '#f59e0b', limit: 3 },
{ id: 'done', title: 'Done', color: '#22c55e' },
]}
items={[
{ id: '1', title: 'Design homepage', columnId: 'todo', order: 0 },
{ id: '2', title: 'Build API', columnId: 'doing', order: 0, assignee: { name: 'Jane' } },
]}
onItemMove={(id, col, order) => updateTask(id, col, order)}
onAddItem={(colId) => openCreateDialog(colId)}
/>Composable container with header, content, and footer slots.
Small status label with color variants.
User avatar with image, fallback initials, and size variants.
Custom-styled scrollable area with thin scrollbars.