Components
KanbanBoard
Drag-and-drop board with fixed-width columns for moving cards between lists.
KanbanBoard renders cards in fixed-width columns and lets users drag cards
within and across columns (powered by dnd-kit). State is controlled: you own the
columns and cards arrays, and onMoveCard(cardId, columnId) fires when a drag
ends so you can persist the new column. Each card references its list via
columnId. Use it for task boards, pipelines, or any status-based workflow.
Example
Preview
Todo
Polish primitive lab
Done
Ship v3 primitives
import { KanbanBoard } from '@officina/ui';
import { useState } from 'react';
function Board() {
const [cards, setCards] = useState([
{ id: 'task-1', columnId: 'todo', content: 'Draft spec' },
{ id: 'task-2', columnId: 'done', content: 'Ship release' },
]);
return (
<KanbanBoard
columns={[
{ id: 'todo', title: 'Todo' },
{ id: 'done', title: 'Done' },
]}
cards={cards}
onMoveCard={(cardId, columnId) =>
setCards((prev) => prev.map((c) => (c.id === cardId ? { ...c, columnId } : c)))
}
/>
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| cards* | KanbanCardItem[] | — | Cards, each referencing its column by id. |
| columns* | KanbanColumnItem[] | — | Column definitions in display order. |
| className | string | — | |
| onMoveCard | (cardId: string, columnId: string) => void | — | Called when a card is dragged to a new column. |