@bimetal/kanban-react-components
The default React Kanban board for BIMETAL — a thin binding over the
canonical @bimetal/kanban-headless controller. Every
interaction decision (drag thresholds, drop indices, WIP rejection, undo) lives
in the headless controller; this package owns only the DOM: hit-testing pointer
drags, normalising keyboard events, and rendering.
Features
- Real drag-and-drop — pointer drag across and within columns, with a live drop-gap indicator. No per-card move buttons.
- Keyboard a11y — pick a card up with Space, move it with the
arrow keys (←/→ across columns, ↑/↓ within), drop with Space/Enter,
cancel with Esc.
aria-grabbedreflects the held card. - Columns — add, rename inline, reorder, delete (cards cascade), with per-column WIP limits that reject over-limit moves as an undo toast.
- Cards — title, description, labels; fully custom card bodies via
renderCardwhile the drag/focus wrapper stays owned by the component. - Filter, undo, theming — text filter over title/description/labels, a
one-click undo toast, and a light/dark token set from
@bimetal/kanban-themes.
Built on event sourcing: the whole board is one aggregate, every change is an event, and undo + full history come for free.
Usage
import { Kanban } from '@bimetal/kanban-react-components';
import { createKanbanStore } from '@bimetal/kanban-data';
const store = createKanbanStore();
// …seed the board…
function App() {
return <Kanban store={store} boardId="board-1" />;
}
Custom card bodies:
<Kanban
store={store}
boardId="board-1"
darkMode
renderCard={(card) => <MyCard card={card} />}
/>
Props
| Prop | Type | Notes |
|---|---|---|
store | KanbanStore | The board store. Immutable after mount. |
boardId | string | Which board to render. Immutable after mount. |
config | KanbanConfigInput? | Locale overrides, merged with defaults. |
darkMode | boolean? | Apply the dark token set. |
showFilter | boolean? | Show the toolbar filter (default true). |
renderCard | (card: Card) => ReactNode | Custom card body. |
onError | (err: unknown) => void | Infrastructure errors (a WIP rejection is an undo toast, not an error). |
License
Apache-2.0