Kanban

A board places cards in columns and reports every move. The board owns the flat placement list in uncontrolled mode, and a controlled order keeps it in the caller's store.

This page is the source, not a live preview. The board is a GPUix surface; the browser drawing on the Kanban block is an illustration of it.

UsageCopy Anchor Link

import { Kanban } from "@gpuixui/components/kanban";
import type {
  KanbanCard,
  KanbanColumn,
  KanbanMove,
} from "@gpuixui/components/kanban";

const columns: ReadonlyArray<KanbanColumn> = [
  { id: "open", title: "Open" },
  { id: "hunting", title: "Hunting" },
  { id: "cleared", title: "Cleared" },
];

const cards: ReadonlyArray<KanbanCard> = [
  { id: "exam", column: "open", title: "Pass the Hunter Exam" },
  { id: "troupe", column: "hunting", title: "Track the Phantom Troupe" },
];

const move = (next: KanbanMove) => save(next);

<Kanban
  label="Hunter contracts"
  columns={columns}
  cards={cards}
  onMove={move}
  onCardClick={(card) => open(card.id)}
/>;

MovingCopy Anchor Link

A card moves by pointer or keyboard; both routes produce the same KanbanMove.

• Pointer — press a card, move, release. A single insertion line marks the slot; the source card stays in place at reduced opacity and no column or card is tinted.
• Keyboard — a focused card moves with Up/Down inside its column and Left/Right into the neighbouring one. The move stops at the ends; it does not wrap. Enter or Space presses the card.

onMove reports id, from, to and index. The index counts the destination column without the moving card, which is the slot the line painted. onOrderChange reports the whole arrangement after an accepted move.

Controlled orderCopy Anchor Link

Pass order to own the arrangement, or defaultOrder to start uncontrolled. An order saved before a card was added is still readable: a card the order does not name is appended to its own column, and an entry naming a card or column this render does not carry is dropped.

LimitationsCopy Anchor Link

• 0.11.0 has no aria-grabbed or aria-dropeffect, so a drag is not announced as a drag; the card's name and the arrow contract carry the interaction.
• No live region: a move is not announced. The column counts are painted text.
• The runtime has no document, window or getBoundingClientRect, so @dnd-kit/core cannot run here. Drag is pointer capture plus renderer.getElementBounds — the same model the shipped Slider uses.
• There is no auto-scroll while a long column is dragged past its edge.

APICopy Anchor Link

KanbanMove is { id, from, to, index }; KanbanOrder is ReadonlyArray<{ id, column }> in reading order.

RelatedCopy Anchor Link

• Kanban block — the browser drawing of this board
• Card — the content a card can hold
• List — a single-column alternative

Edit this page on GitHubpackages/components/docs/kanban.mdx