build69
build69  /  Components  /  Work & Boards  /  Kanban

Kanban

v1.0.12Updated 27 Aug 2026

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

Preview

Live · 17 stories
DefaultOpen ↗
Why this is recommendedkanbanboarddnddrag+3

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

Recommended for+14
  • Task pipelines
  • Sales stage boards
  • Recruiting pipelines
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)
  • 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';

<Kanban columns={stages} onCardMove={move} />

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

Column definitions with cards

KanbanColumn[]yes
onCardMove

Move callback (card, from, to)

function
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
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