C. Data & Tables

Kanban Board

Draggable columns and cards, a card detail modal, swimlanes, WIP limits and the empty board.

5 screensDesktop · Tablet · MobileLight · Dark

Write every screen of this block into your project — the source is then yours to edit.

bash

npx @wunderui/cli add data/kanban

01Board with columns & cards

Uses: AppFrame · ColumnHeader · KanbanCardItem · AvatarStack · Badge

components/blocks/data/kanban/01-board.tsx

Uses: AppFrame · Dialog · Badge · Avatar · Checkbox

components/blocks/data/kanban/02-card-detail.tsx

Uses: AppFrame · ColumnHeader · KanbanCardItem · Badge

components/blocks/data/kanban/03-swimlanes.tsx

Uses: AppFrame · ColumnHeader · KanbanCardItem · TextField · Badge

components/blocks/data/kanban/04-add-column-wip.tsx

Uses: AppFrame · EmptyState · Button

components/blocks/data/kanban/05-empty-board.tsx