KanbanBoard

Data Display

Drag-and-drop Kanban board with configurable columns, card management, swimlanes, and workflow state transitions

KanbanBoard Component

Drag-and-drop task board for sprint planning and execution workflows.

Basic Usage

Render a compact board with default columns and cards.

To Do2

Draft API spec

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

Design review

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
In Progress1

Implement auth

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
Done1

Setup CI

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

Implementation Notes

Keep setup minimal so teams can adopt the component quickly.

  • - Start with simple columns and descriptive card titles.
  • - Keep board labels aligned with existing sprint language.
  • - Avoid introducing custom rendering too early.

Normal Usage

Capture card movement callbacks for persistence and audit logs.

To Do2

Draft API spec

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

Design review

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
In Progress1

Implement auth

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
Done1

Setup CI

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

No drag-and-drop activity captured yet.

Implementation Notes

This pattern maps to everyday product planning and release operations.

  • - Persist moves to keep team views synchronized.
  • - Log move metadata for metrics and retrospectives.
  • - Pair updates with optimistic UI for responsiveness.

Advanced Usage

Customize card rendering to surface ownership and delivery context.

To Do2

Draft API spec

Owner: Mila | ETA: 2d

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

Design review

Owner: Raj | ETA: 1d

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
In Progress1

Implement auth

Owner: Sam | ETA: 3d

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
Done1

Setup CI

Owner: Ava | ETA: done

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

Implementation Notes

Advanced mode should compose cleanly with app state and callback orchestration.

  • - Keep custom card templates compact and scannable.
  • - Avoid hiding core drag affordances with heavy styling.
  • - Standardize card metadata for predictable rendering.

Real-Life Use Cases

Commonly used for product backlogs and release readiness boards.

To Do2

Draft API spec

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

Design review

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
In Progress1

Implement auth

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.
Done1

Setup CI

Press space or enter to start dragging. Use arrow keys to move. Press space or enter again to drop. Press escape to cancel.

No drag-and-drop activity captured yet.

Implementation Notes

Show how the component fits real workflows, not isolated UI demos.

  • - Tie card creation to role-based permissions.
  • - Reflect board status in release health dashboards.
  • - Keep interactions predictable across desktop and mobile.

View on GitHub

See the full source code on GitHub

Related Components

View all
Accordion

Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation

Avatar

User avatar with image loading, fallback text generation, status indicators, and shape variants

AvatarGroup

Stacked avatar display with overflow handling, max count configuration, and hover expansion

Badge

Status indicator with variant system, dot mode, positioning, and pulsing animation support

Previous

InfiniteScroll

Next

MultiSelect