## Kanban Board (S—028)

A task board with drag-and-drop, a full keyboard move mode, WIP limits and inline card creation.

- URL: https://sundaeui.dev/components/kanban-board
- Category: Cards & data visualization · Art direction: Understated
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/kanban-board.json`
- Tags: dashboard, tailwind, board, keyboard, tasks, react, drag-and-drop, kanban

A board you can actually run a team on. Drag cards within or between columns: a line shows exactly where the card will land, the column you’re over tints, and the source card fades. Columns can set a work-in-progress limit, and the count turns red when it’s exceeded.
It works fully without a mouse. Focus a card and press Space to lift it (it tilts and outlines), arrow keys to move it through positions and columns, and Space to drop or Escape to cancel. Every move is announced to screen readers. Add cards inline with Enter. Empty columns show a drop target.
Use it for task tracking, hiring pipelines and content calendars. State is fully controlled, so persist with onChange.

### Usage

```tsx
import { KanbanBoard } from '@/components/sundae/kanban-board'

<KanbanBoard
  columns={columns}
  onChange={(next) => { setColumns(next); save(next) }}
  onAdd={(columnId, title) => ({ id: crypto.randomUUID(), title })}
/>
```

### Props

- `columns` (`KanbanColumn[]`, required): { id, title, cards: { id, title, tag?, assignee?, due? }[], limit? }.
- `onChange` (`(columns) => void`, required): Called with the new board after any move or add.
- `onAdd` (`(columnId, title) => KanbanCard`): Enables inline add and returns the new card.

### Accessibility

- Every card is focusable with a keyboard move mode (Space, arrows, Escape) and a live region describing each move.
- Columns are labelled sections that include their card count.
- HTML5 drag-and-drop is an enhancement. Every move can be made with the keyboard.