Kanban Board

A horizontally scrolling Kanban board built from column data: each column shows its title, a card count and stacked cards with a title and optional meta line.

src/registry/ui/kanban-board.tsx/r/kanban-board.json

Installation#

bash
npx shadcn@latest add @minidev/kanban-board

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/kanban-board.json

Usage#

tsx
import { KanbanBoard } from "@/components/ui/kanban-board"

export function Example() {
  return (
    <KanbanBoard columns={[
      { id: "todo", title: "Todo", cards: [{ id: "a", title: "Multi-select polish", meta: "Batch A" }] },
      { id: "doing", title: "Doing", cards: [{ id: "b", title: "Data table", meta: "Batch B" }] },
      { id: "done", title: "Done", cards: [{ id: "c", title: "Dropdown fix", meta: "Shipped" }] },
    ]} />
  )
}

API reference#

KanbanBoard props
PropTypeDefault
columnsKanbanColumn[]SAMPLE_COLUMNS
classNamestring-

Examples#

All kanban, timeline and workflow components

Learn more