@alphinex/kanban

Headless drag/drop board state + styled Kanban renderer.

<KanbanBoard>

import { KanbanBoard } from "@alphinex/kanban";
import { useState } from "react";

function TaskBoard() {
  const [columns, setColumns] = useState([
    { id: "todo", title: "To do", cards: [{ id: "1", title: "Write spec" }] },
    { id: "doing", title: "Doing", cards: [] },
    { id: "done", title: "Done", cards: [] },
  ]);

  return <KanbanBoard columns={columns} onColumnsChange={setColumns} />;
}

Cards and columns are draggable with the mouse/touch or the keyboard (dnd-kit's sensors — see ADR-0011). Every card also renders a "Move to column" <select> — an independent, always-focusable keyboard/screen-reader alternative to dragging, not a drag simulation. Cross-container keyboard drag is a known hard edge case even within dnd-kit itself, so this control is the actual accessible path for keyboard/screen-reader users to move a card between columns.

Customize card content with renderCard — compose @alphinex/business components here:

<KanbanBoard
  columns={columns}
  onColumnsChange={setColumns}
  renderCard={(card) => <ApprovalWorkflow steps={card.steps} />}
/>

useKanbanBoard()

The headless engine <KanbanBoard> is built on — pure data operations (moveCard, moveColumn, findCardLocation) with zero drag-library coupling, useful if you want to build your own renderer:

import { useKanbanBoard } from "@alphinex/kanban";

const { columns, moveCard, moveColumn } = useKanbanBoard({ columns: myColumns, onColumnsChange });

See documentation/PRODUCT-RESEARCH-MASTER-PLAN.md §10 (Sprint 17) for the full package contract.