Board

Install

pnpm dlx shadcn@latest add @vegastack/board

Usage

import { Board } from "@/components/ui/board";

<Board
  aria-label="Deals"
  columns={stages.map((s) => ({ id: s.id, title: s.label, items: s.deals }))}
  getItemId={(deal) => deal.id}
  renderCard={(deal) => (
    <>
      {deal.name} · {deal.amount}
    </>
  )}
  onMove={({ id, to }) => api.moveDeal(id, to.container, to.index)}
/>;

The split is content/chrome: you render card content only; the board owns the column shells, counts, empty drop targets, collapsed strips, drag and keyboard models, and the pending/rejected affordances. onMove is the single move command for every input path — drag, keyboard move mode, and the menu.

Scope

Examples

Server-gated moves

Return a promise from onMove: the card shimmers in place while the write is in flight, and a rejection announces the snap-back — the host never applied the move, so the card simply stays.

Locked lanes, the keyboard path, and column height

A column with droppable: false renders as an inert drop target that states its lockedReason rather than silently refusing. Every card's "Move card" menu is the lossless keyboard and assistive-tech equivalent of a drag, and it stays available for lanes the pointer path refuses — which is also why the grab cursor appears only where a pointer drag can actually start (not under dragDisabled, not below the mobile breakpoint, not in readOnly).

columnMaxHeight caps the scrolling card list. It defaults to the shared overlay ceiling token; a board inside a shorter shell passes its own CSS length instead of the component assuming a viewport reservation.

API Reference

Column

Accessibility

• The keyboard path is not a fallback — below 768px pointer drag disables outright, so the move mode and the per-card Move menu are the only paths and are lossless by construction: every droppable column is a menu target, with visible lock reasons on unavailable ones.
• Cards form one roving tab stop per board: ↑/↓ move within a column, ←/→ across columns at a clamped index (RTL-aware), Home/End jump within the column.
• Space lifts the focused card into move mode (arrows then commit one announced step at a time; Escape ends); Enter activates the card; M opens its Move menu.
• A dragged card gains no shadow — flat by doctrine; lift reads as the dimmed origin plus the drop-indicator line. Empty columns are real drop targets using Empty variant="dashed" (the classic drop-zone look).
• Every move and every rejection announces through a polite live region.

Do / Don't