KanbanBoard

Overview

KanbanBoard renders a horizontal set of columns with draggable cards for task/workflow management. Supports drag-and-drop between columns, adding cards, and column customization.

Backlog

Research competitors

Analyze top 5 design systems

Write docs for Sidebar

In Progress

Build DataTable preview

Add sorting and pagination demo

Review

Calendar a11y audit

Test screen reader navigation

Done

Ship Carousel component

Fix ColorPicker popover

Usage

<KanbanBoard
  columns={[
    { id: 'todo', title: 'To Do', cards: todoCards },
    { id: 'progress', title: 'In Progress', cards: progressCards },
    { id: 'done', title: 'Done', cards: doneCards },
  ]}
  onCardMove={handleCardMove}
/>

API Reference

Prop	Type	Default	Description
`columns`	`KanbanColumn[]`	`[]`	Board columns with cards
`onCardMove`	`(cardId, fromCol, toCol) => void`	—	Card move handler
`onCardAdd`	`(columnId: string) => void`	—	Add card handler
`draggable`	`boolean`	`true`	Enable drag-and-drop

Component	When to Use Instead
DataTable	Tabular data views
Timeline	Chronological events