KanbanBoard

A drag-and-drop Kanban board with keyboard support. Cards can be dragged between columns and reordered within columns.

Installation

npx dafink-ui add kanban

Requires: @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities

Demo

To Do

2
Research

Research competitors

Write spec

Define requirements for v2.

In Progress

2
Engineering

Build prototype

Design review

Review mockups with the team.

Done

1

Kick-off meeting

Align on goals and timeline.

Composition

<KanbanBoard>/* data-driven */
<KanbanColumn>
<KanbanCard />
</KanbanColumn>
</KanbanBoard>

Props

NameTypeDefaultDescription
initialColumnsKanbanColumnData[]-Initial column and card data. Column and card state is managed internally.
classNamestring""Extra classes on the board container.