build69
build69  /  Components  /  Work & Boards  /  Kanban

Kanban

v1.0.24Updated 20 Oct 2026

Drag-and-drop board with columns of cards (dnd-kit). Use for task pipelines, sales stages, kanban workflows.

View source← Back to catalog

Preview

Live · 20 stories
DefaultOpen ↗
▸Why this is recommendedkanbanboarddnddrag+3

The default, out-of-the-box Kanban.

Recommended for+14
  • ✓Task pipelines
  • ✓Sales stage boards
  • ✓Recruiting pipelines
  • ✓A board whose lists live in an API, where only the actions the server supports may be offered
Tags+6
kanbanboarddnddragcardspipelinedefault
Features+4
  • Drag cards between columns (dnd-kit)
  • Reorder within column
  • Column-level WIP limits
  • Per-card metadata (assignee, priority, due)
  • Optional column collapse
  • Add-card affordance per column (showAddCard gates it for derived boards)
  • Column ⋯ menu (rename / WIP / move / clear / archive) and the card right-click menu offer an action only when it can take effect: everything on an uncontrolled board, and on a controlled one only what onChange or that action callback reports (fb_b45fe487)
  • Explicit trims: columnActions / cardActions (false or a whitelist), enableInlineRename, renderColumnSettings — with no rows left, no ⋯ trigger and no card menu are rendered
  • i18n: labels prop overrides every built-in string (composers, menus, aria-labels, drag announcements); Date due dates and counts format via LocaleProvider (Buddhist-calendar aware)
Not recommended for−2
  • ✕Linear lists (use DataTable)
  • ✕Calendar events (use BuildCalendar)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Kanban" })

Usage

import { Kanban } from '@/components/patterns/kanban';

// Server-backed pipeline: only the actions the API supports are offered.
<Kanban.Board
  columns={stages}
  onCardMove={move}
  showAddCard={false}
  showAddColumn={false}
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
columns

Controlled columns — the board renders exactly this and keeps no copy. Pair with onChange (or the per-action callbacks) so its actions can take effect

KanbanBoardColumn[]—
defaultColumns

Uncontrolled initial columns — the board owns the state, so every action is real

KanbanBoardColumn[]—
onChange

The whole next board after any mutation. On a controlled board this alone re-enables every column/card action

(columns: KanbanBoardColumn[]) => void—
onCardMove

Card dropped (or moved from the card menu)

(cardId, fromColumnId, toColumnId, toIndex) => void—
onColumnMove

Column reordered — also what makes Move left / Move right offerable on a controlled board

(columnId, toIndex) => void—
onColumnRename

Inline rename committed — gates Rename list + the click-to-rename title on a controlled board

(columnId, title) => void—
onColumnArchive

Archive list chosen — gates that row on a controlled board

(columnId) => void—
onColumnClear

Clear list chosen. Wire it on a server-backed board; without it (and without onChange) Clear list is not offered (fb_b45fe487)

(columnId) => void—
onColumnWipLimitChange

WIP limit set or cleared. Same rule as onColumnClear

(columnId, wipLimit?: number) => void—
onCardClick

Card body click; also the Open card row of the context menu

(cardId) => void—
onCardEdit

Quick-edit pencil; also the Edit card row

(cardId) => void—
onCardCopy

Copy card chosen from the card menu — gates that row on a controlled board

(cardId) => void—
onCardArchive

Archive card chosen from the card menu (uncontrolled boards also remove it) — gates that row on a controlled board

(cardId) => void—
onCardCoverChange

Cover colour picked or cleared from the card menu — gates the Cover submenu on a controlled board

(cardId, color | null) => void—
columnActions

Trim the column ⋯ menu (fb_b45fe487). Omit for the capability rule above; false drops the menu (no ⋯ trigger); an array whitelists rows inside the rule; true forces every row

boolean | Array<'rename' | 'wipLimit' | 'move' | 'clear' | 'archive'>—
cardActions

Same for the card right-click menu; false means a right-click opens nothing. open/edit still need onCardClick/onCardEdit

boolean | Array<'open' | 'edit' | 'move' | 'copy' | 'cover' | 'archive'>—
enableInlineRename

Double-click / Enter / F2 rename on a column title. Defaults to whatever columnActions resolved rename to; false leaves a plain title (and drops the Rename list row that would open it)

boolean—
renderColumnSettings

Replace the ⋯ rows: receives the column and the rows the rule resolved, so a derived board can append its own server-backed actions or return [] for none

(column, defaultSettings) => KanbanColumnSetting[]—
showAddCard

Show the per-column 'Add a card' affordances. Defaults to true when onAddCard is provided — set false (or omit onAddCard) for boards whose cards are derived elsewhere.

boolean—
showAddColumn

Show the 'Add another list' composer. Defaults to true when onAddColumn is provided

boolean—
loading

Column/card skeleton in a labelled role="status" region (loadingColumnCount sets the number)

boolean—
enableFilters

Search + assignee/priority filter ribbon above the board

boolean—
labels

Override any built-in UI string — composers, menus, aria-labels, drag announcements (i18n). Merged over DEFAULT_KANBAN_LABELS; {token} templates for announcements. Card dueDate also accepts a Date, formatted through LocaleProvider. See the ThaiLocale story.

Partial<KanbanLabels>—

Related

Platform docsAll componentsSource files