revido kit
Start building
← All components
layout / stable

KanbanBoard

Horizontally scrolling workflow lanes. Nest KanbanColumn with name/count and WorkItemKanbanCard with title inside KanbanBoard; use Page bleed fill when the board owns page scrolling.

LIVE PREVIEW
Loading preview…

When to use

  • Workflow boards with a status lane per column, inside Page bleed fill.
  • Use KanbanEmptyState for empty lanes and isOver/isDragging/isSelected to reflect app-owned drag and selection state.

Consider an alternative

  • Tables or grouped task lists.
  • Drag/drop sensors or business mutations — the consuming app owns those.

Import

import { KanbanBoard } from '@revido-llc/kit';

Keyboard interaction

  • Tab focuses the board or its card controls.
  • ArrowLeft/ArrowRight scroll one column when the board is focused; Home/End reach the ends.
  • Card and drag controls retain their own keyboard events.

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

fillbooleantrueOwn scrolling within the available panel height. Default true.
childrenReactNode—
classNamestring—

Related exports

KanbanColumn, KanbanEmptyState, KanbanCard, KanbanCardHeader, KanbanCardTitle, KanbanCardTags, KanbanCardTag, KanbanCardFooter, KanbanCardMenuButton, WorkItemKanbanCard

Examples

Workflow board

<Page bleed fill>
  <KanbanBoard aria-label="Project delivery">
    <KanbanColumn name="Todo" count={items.length} addAction={{ label: "Add to Todo", onPress: addItem }}>
      {items.map(item => <WorkItemKanbanCard key={item.id} title={item.name} />)}
    </KanbanColumn>
  </KanbanBoard>
</Page>

Card states

<KanbanCard isSelected={selected} isDragging={isDragging} setNodeRef={setNodeRef} tabIndex={0}>
  <KanbanCardTitle>Client portal</KanbanCardTitle>
</KanbanCard>

Drop and empty states

<KanbanColumn name="Doing" count={0} statusIcon="in-progress" setNodeRef={setNodeRef} isOver={isOver}>
  <KanbanEmptyState isOver={isOver} message="No items" onAction={addItem} actionLabel="Add item" />
</KanbanColumn>

Literal anatomy 1

Static component anatomy; bind events in the consuming app.

<KanbanBoard aria-label="Delivery"><KanbanColumn name="Todo" count={1}><WorkItemKanbanCard title="Draft proposal" /></KanbanColumn><KanbanColumn name="Done" count={0}><KanbanEmptyState message="No completed items" /></KanbanColumn></KanbanBoard>

Literal anatomy 2

Static component anatomy; bind events in the consuming app.

<KanbanCard><KanbanCardHeader id="TASK-1" /><KanbanCardTitle>Draft proposal</KanbanCardTitle><KanbanCardTags><KanbanCardTag>Design</KanbanCardTag></KanbanCardTags><KanbanCardFooter>3 points</KanbanCardFooter></KanbanCard>

Literal anatomy 3

Static component anatomy; bind events in the consuming app.

<KanbanCardMenuButton label="Card actions" />

Related components