KanbanBoard

data-display

Column-based kanban board with card counts, card titles/descriptions/tags, click handlers, horizontal scroll, and keyboard-accessible cards. Token-driven column and card styling.

Import

typescript
import { KanbanBoard } from "packages/ui/src";

Props

KanbanBoardProps

PropTypeRequired
columnsKanbanColumn[]Yes
onCardClick(cardId, columnId) => voidNo

Examples

Kanban Board

Column-based kanban board with cards, tags, counts, and click handlers.

Backlog2
Design token auditReview all 800+ tokensdesign
Component docsWrite usage guidesdocs
In Progress2
KanbanBoard componentColumn-based board viewfeature
CI/CD pipelineinfra
Review1
TreeView tests8 test cases passing
Done3
Production deployinfra
50 componentsFull pipeline validated
355 tests passingtest

Metadata

Component Metadata
Familydata-display
FrameworksNext.js, Astro/EmDash
DescriptionColumn-based kanban board with card counts, card titles/descriptions/tags, click handlers, horizontal scroll, and keyboard-accessible cards. Token-driven column and card styling.
PropsKanbanBoardProps (columns: KanbanColumn[], onCardClick?: (cardId, columnId) => void)
Statesempty-columns, populated, many-cards, horizontal-scroll
A11y
  • Board has role=region with aria-label
  • Columns have role=list with aria-label
  • Cards have role=listitem
  • Cards are focusable and keyboard-accessible
Responsive
  • Horizontal scroll on overflow
  • Min-width per column
Motion
  • Border-color transition on card hover
Token Dependencies
  • components.kanbanBoard.columnBackground
  • components.kanbanBoard.columnBorderRadius
  • components.kanbanBoard.columnPadding
  • components.kanbanBoard.columnGap
  • components.kanbanBoard.columnMinWidth
  • components.kanbanBoard.headerColor
  • components.kanbanBoard.headerFontSize
  • components.kanbanBoard.countBackground
  • components.kanbanBoard.countColor
  • components.kanbanBoard.cardBackground
  • components.kanbanBoard.cardBorderRadius
  • components.kanbanBoard.cardPadding
  • components.kanbanBoard.cardBorder
  • components.kanbanBoard.cardGap
  • components.kanbanBoard.titleColor
  • components.kanbanBoard.titleFontSize
  • components.kanbanBoard.descColor
  • components.kanbanBoard.descFontSize
Content Slotscolumns (KanbanColumn[]), cards (KanbanCard[])
CMS Bindings
  • Columns from CMS workflow states
  • Cards from CMS items
Test Cases
  • Renders columns
  • Has role=region
  • Columns have role=list
  • Cards have role=listitem
  • Shows column titles
  • Shows card count
  • Clicking card calls onCardClick
  • Passes className through