Building kanban boards from scratch requires wiring drag-and-drop plumbing for cards across columns, computing drop positions on hover, reordering within a column without duplicates, and managing which column a card came from—all while keeping drag affordances and visual feedback synchronized. Most teams end up with scattered state, brittle position math, and no single source of truth for the board’s column order.

Kanban is a controlled compound component with Kanban.Column, Kanban.Card, and optional Kanban.ColumnHandle subcomponents. Each element carries a stable id prop; the root listens for onCardMove(cardId, fromColumn, toColumn, toIndex) and onColumnMove(columnId, toIndex) callbacks, surfacing the computed drop index so the consumer owns state mutation. Columns support optional title, wipLimit (soft cap shown with a count chip; turns red when exceeded), hideWhenEmpty to collapse zero-card columns, and unstyled to strip defaults and bring your own theme. Cards and columns are draggable by default; a ColumnHandle child makes its column reorderable.

Import Kanban from @particle-academy/react-fancy. Wrap your columns in <Kanban onCardMove={handler} onColumnMove={colHandler}>, drop <Kanban.Column id="..."> inside, optionally add <Kanban.ColumnHandle> around the header to unlock horizontal reorder, and populate with <Kanban.Card id="..."> children. The callbacks pass cardId, source/destination column ids, and the computed drop index; handle the reorder in your state and re-render with the new card order. All drop positions are computed from mouse Y (cards) or X (columns) and painted as a blue drop indicator during drag.