What is Kanban board?

A kanban board lays out a workflow as columns, such as Backlog, In progress, In review and Done, with each task as a card in the column matching its status. Moving a card between columns updates its status, and the board as a whole shows where work is piling up. The idea comes from Toyota's production system, where physical cards signaled when to start new work. Software teams use it for issue tracking, sales teams for deal pipelines, and support teams for ticket queues.

Anatomy

• Columns for each status, each with a title and a card count. A work-in-progress limit can be shown beside the count.
• Cards with a title and a few pieces of metadata: assignee, priority, due date, issue key.
• Add card control at the top or bottom of a column.
• Swimlanes (optional): horizontal rows that group cards by team, assignee or epic.

Accessibility

Drag and drop is the core interaction, and it is also where kanban boards usually fail accessibility. WCAG 2.2 success criterion 2.5.7, Dragging Movements, requires a way to do the same thing with single clicks or taps. The simplest alternative is a Move to menu or a status select on each card. Keyboard drag support is a bonus on top of that, not a replacement.

• Mark up each column as a labeled list (a heading plus ul) so screen reader users hear column names and counts.
• Announce moves in a polite live region: "Fix login bug moved to In review, position 2 of 5".
• Keep focus on the moved card after a move so keyboard users can continue.
• Do not use color alone for priority or status; add a label or icon.

How to build one in React

Model the board as data first. MiniDev's KanbanBoard renders columns and cards from a plain array, which you can pair with any drag library:

import { KanbanBoard, type KanbanColumn } from "@/components/ui/kanban-board"

const columns: KanbanColumn[] = [
  { id: "todo", title: "To do", cards: [{ id: "1", title: "Write release notes", meta: "Due Fri" }] },
  { id: "doing", title: "In progress", cards: [{ id: "2", title: "Fix login redirect", meta: "Priya" }] },
  { id: "done", title: "Done", cards: [] },
]

export function Board() {
  return <KanbanBoard columns={columns} />
}

Store each card's position with a sortable key, such as a fractional index, so a move only updates one row. Apply the move on screen immediately and reconcile with the server afterward; that is optimistic UI, and it is what makes drag and drop feel direct. For a full page with approvals, priorities and due dates, see WorkflowBoard in the workflow category.