KanbanBoard

KanbanBoard renders status columns and cards for product workflows. Supplying onCardMove enables native drag-and-drop and keyboard-reachable movement controls.

#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";

#Controlled

Passing onCardMove enables native drag-and-drop between columns. The same callback is used by the focusable Move card left/right buttons, including when renderCard supplies custom content. Touch and keyboard users can use these buttons without dragging. Omit onCardMove for a read-only board. Drops from outside this board and same-column drops are ignored. A polite live region announces completed drops; the consumer owns the resulting card state.

<KanbanBoard
  columns={[{ id: "todo", title: "To do" }, { id: "done", title: "Done" }]}
  cards={cards}
  onCardMove={(card, columnId) =>
    setCards(current => current.map(item =>
      item.id === card.id ? { ...item, columnId } : item
    ))
  }
  renderCard={card => <Text>{card.title}</Text>}
/>

#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. After the controlled state accepts a button move, focus follows the card and a live status announces its destination. Rejected moves are not announced as completed.

#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.