Skip to content
Ordermatic Docs

Kanban board

A drag-and-drop board for triaging work across columns (the supervisor inbox). Built on @dnd-kit — pointer and keyboard dragging, with a drag overlay.

Live

Section titled “Live”
New2
Acme Foodsnew
Cedar Supplynew
In review1
Brave Distributorsawaiting review
Submitted1
Delta Wholesalesubmitted

Drag a card within or between columns. Keyboard: focus a card, Space to lift, arrows to move, Space to drop.

Usage

Section titled “Usage”
import KanbanBoard, { type KanbanColumn } from '@repo/ui/KanbanBoard';


const columns: KanbanColumn<Order>[] = [
  { id: 'new', title: 'New', cards: newOrders },
  { id: 'review', title: 'In review', cards: reviewing },
];


<KanbanBoard
  columns={columns}
  getCardId={(o) => o.id}
  renderCard={(o) => <OrderCard order={o} />}
  onMove={(cardId, toColumnId, toIndex) => applyMove(cardId, toColumnId, toIndex)}
/>

Controlled: the parent owns column state; onMove(cardId, toColumnId, toIndex) fires on drop and the parent applies it. Cards and columns are token-styled and surface-aware.

Notes

Section titled “Notes”
  • Pointer drag starts after a 4px move (so clicks still register); keyboard drag via @dnd-kit’s sortable coordinates. A DragOverlay shows the lifted card.
  • Moves resolve on drop (no live cross-column reparent preview) — simpler and flicker-free; add onDragOver reparenting later only if you need the live preview.