Kanban Board
A task board with drag-and-drop, a full keyboard move mode, WIP limits and inline card creation.
Overview
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.
When to use
- Dashboards and reports where the shape of the data matters.
When not to use
- Exact lookups: give people a table or export too.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/kanban-board.jsonnpx shadcn@latest add https://sundaeui.dev/r/kanban-board.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/kanban-board.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/kanban-board.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy kanban-board.tsx into components/sundae/.
- Make sure Tailwind scans that folder (v4 detects it automatically; v3 needs it in `content`).
- Import the component and use it as shown below.
Usage
import { KanbanBoard } from '@/components/sundae/kanban-board'
<KanbanBoard
columns={columns}
onChange={(next) => { setColumns(next); save(next) }}
onAdd={(columnId, title) => ({ id: crypto.randomUUID(), title })}
/>Props
| Prop | Type | Default |
|---|---|---|
columns*{ id, title, cards: { id, title, tag?, assignee?, due? }[], limit? }. | KanbanColumn[] | — |
onChange*Called with the new board after any move or add. | (columns) => void | — |
onAddEnables inline add and returns the new card. | (columnId, title) => KanbanCard | — |
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.
Customization
- Render richer cards by editing the article block. The drag logic doesn’t depend on its contents.
- For touch drag, add a long-press handler that enters lift mode.
FAQ
- Is Kanban Board free?
- Kanban Board is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Kanban Board?
- Run npx shadcn@latest add https://sundaeui.dev/r/kanban-board.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Kanban Board support keyboard and screen readers?
- 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.
- Does Kanban Board respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All data →Pulse KPI
Data · UnderstatedData Table
Data · UnderstatedUsage Meters
Data · UnderstatedDropdown Menu
Navigation · Understated- Pro
Team Members
Components · Understated Stacked Bars
Data · Refined