Kanban

Items in stage columns: deal pipelines, editorial workflows, recruiting, support queues. Drag between columns, or move with the card menu and Alt + arrow keys. Column totals, WIP limits, collapsible columns, swimlanes, quick add, move rules with reasons, optimistic saves with rollback, and virtualized columns for thousands of cards.

Installation

Usage

import { Kanban, KanbanCardTitle, applyKanbanMove, sumBy, type Stage } from "@vamos-ui/react/sortable";

const stages: Stage[] = [
  { key: "lead", label: "Lead", tone: "chart-1", probability: 0.1 },
  { key: "proposal", label: "Proposal", tone: "chart-3", probability: 0.5, wipLimit: 6 },
  { key: "won", label: "Won", tone: "success", category: "done", probability: 1 },
];

<Kanban
  aria-label="Sales pipeline"
  stages={stages}
  items={deals}
  getStageKey={(d) => d.stage}
  summary={(items) => format.currency(sumBy(items, (d) => d.value))}
  renderCard={(d) => <KanbanCardTitle>{d.title}</KanbanCardTitle>}
  onMove={(e) => setDeals((all) => applyKanbanMove(all, e, {
    getId: (d) => d.id,
    getStageKey: (d) => d.stage,
    update: (d, stage) => ({ ...d, stage }),
  }))}
/>

Columns are role="group" named "Proposal, 12 items" with the summary as description. Cards are focusable articles named by getLabel; inner links and buttons keep their own focus.

Keyboard: on a focused card, Space or Enter lifts it (arrow keys move across columns, Space drops, Esc cancels). Alt + ← / → moves to the adjacent stage (mirrored in RTL), Alt + ↑ / ↓ within the column. The card menu has Move up / down and Move to ▸ every stage. Every move is announced and focus stays on the card.

Cards never blur, even in glass mode. The dragged clone is an opaque popover; blur turns off page-wide while dragging.

Stage is shared with Funnel, Approval flow and Status picker. Money summaries go through useFormat().currency with decimal strings.

A Toaster must be mounted (App shell has one) for the error and blocked-move toasts.

Examples

API