@edux-design/kanban-board

Kanban board primitives with token-based cards, columns, and drag-and-drop ordering. The package is controlled: you own the column/card data and receive updates when cards move.

Installation

pnpm add @edux-design/kanban-board
# or
npm install @edux-design/kanban-board

Peer deps include react and react-dom. Drag-and-drop dependencies are bundled through the package.

Data shape

const columns = [
  {
    id: "column-backlog",
    title: "Backlog",
    cardIds: ["card-1", "card-2"],
  },
  {
    id: "column-progress",
    title: "In progress",
    cardIds: ["card-3"],
  },
];

const cardsById = {
  "card-1": {
    id: "card-1",
    label: "Discovery",
    title: "Shape the brief",
    summary: "Write the temporary feature framing.",
    priority: "High",
    assignee: "VG",
    dueText: "Today",
  },
};

Usage

import { useState } from "react";
import { KanbanBoard } from "@edux-design/kanban-board";

export function Example() {
  const [columns, setColumns] = useState(initialColumns);

  return (
    <KanbanBoard
      columns={columns}
      cardsById={initialCardsById}
      onColumnsChange={setColumns}
    />
  );
}

Props

KanbanBoard

• columns (required): array of column objects with id, title, and cardIds.
• cardsById (required): map of card id to card model.
• onColumnsChange (required): called with the next ordered columns after a drag interaction.
• className: optional wrapper classes for the board row.
• columnWidth: optional width class/string applied to each column wrapper. Defaults to w-[320px].
• showColumnTitle: optional boolean. Defaults to true.
• showColumnCardCount: optional boolean. Defaults to true.
• allowMultiSelectDrag: optional boolean. Defaults to false. Enables same-column multi-select with CMD/CTRL toggle, SHIFT range selection, and group drag.
• deselectOnBlur: optional boolean. Defaults to true. Clears selected cards when focus leaves the board.

KanbanColumn

• column (required): column model.
• cards (required): resolved array of cards for the column.
• totalCards: optional numeric count. Defaults to cards.length.
• widthClassName: optional width class for the column surface.
• showTitle: optional boolean. Defaults to true.
• showCardCount: optional boolean. Defaults to true.

KanbanCard

• card (required): card model with label, title, summary, priority, assignee, and dueText.
• columnId (required): owning column id for sortable metadata.
• isOverlay: internal drag overlay mode.

Notes

• The board supports moving cards within a column and across columns.
• When allowMultiSelectDrag is enabled, users can select multiple cards in the same column and move them together while preserving their order.
• While dragging, the source card becomes a neutral placeholder so layout stays stable.
• Assignee avatars use deterministic colors derived from the assignee name.