KanbanBoard

KanbanBoard renders status columns and cards for product workflows. It intentionally starts with keyboard-reachable move controls instead of drag and drop, so it stays light and accessible by default.

#Default usage

<KanbanBoard
  columns={[
    { id: "todo", title: "Todo" },
    { id: "review", title: "Review" },
    { id: "done", title: "Done" }
  ]}
  cards={[
    { id: "release", status: "todo", title: "Prepare release notes", description: "Collect changeset summaries.", meta: "v0.5.0" },
    { id: "docs", status: "review", title: "Docs review", description: "Check examples and accessibility notes." }
  ]}
/>

#Import

import { KanbanBoard, KanbanColumn, KanbanCard } from "@froggdesign/enter-ui-react";

#Accessibility

Columns use labelled sections and cards are focusable. Move controls are real buttons, so keyboard users can move cards without relying on pointer drag gestures.

#API

• columns defines the workflow columns.
• cards defines card data with id, status, title, description, and meta.
• getCardColumnId maps custom item shapes to columns.
• renderCard replaces the default card renderer.
• onCardMove receives the card, next column id, and previous column id.
• loading renders lightweight skeleton cards.

#Styling

KanbanBoard uses .eui-kanban-board classes and FroggDesign tokens for columns, cards, action controls, and loading states.