All components

Kanban

Board with drag-and-drop columns and cards. Built on dnd-kit.

dnd-kit docs

Basic

Four primitives compose a board: `KanbanBoard` for drag context, `KanbanColumn` for drop targets, `KanbanCard` for sortable items, `KanbanCardHandle` for optional drag handles. Card content is children — plug in any React you want.

To do

2
Write brief
Book rehearsal

Done

1
Confirm venue
<KanbanBoard onDragEnd={handleDragEnd}>
  <KanbanColumn
    id="todo"
    title="To do"
    itemIds={todoItems.map(i => i.id)}
  >
    {todoItems.map(item => (
      <KanbanCard key={item.id} id={item.id}>
        <div className="px-3 py-2 text-sm">{item.title}</div>
      </KanbanCard>
    ))}
  </KanbanColumn>
  <KanbanColumn id="done" title="Done" itemIds={doneItems.map(i => i.id)}>
    {/* ... */}
  </KanbanColumn>
</KanbanBoard>

With drag handle

Set `handleOnly` on `KanbanCard` when the card contains clickable controls. Only the nested `KanbanCardHandle` triggers drag, so buttons inside the card work as expected.

Tasks

2
Approve rota
Send confirmation
<KanbanCard id={item.id} handleOnly>
  <div className="flex items-center justify-between gap-2 px-3 py-2">
    <span>{item.title}</span>
    <div className="flex items-center gap-1">
      <Button variant="ghost" size="sm">Open</Button>
      <KanbanCardHandle />
    </div>
  </div>
</KanbanCard>