KanbanBoard

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

Installation

npx @obi/ui add kanban

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

Preview

To Do

Research

Research competitors

Write spec

Define requirements for v2.

In Progress

Engineering

Build prototype

Design review

Review mockups with the team.

Done

Kick-off meeting

Align on goals and timeline.

Usage

import { KanbanBoard } from '@/src/components/Kanban/Kanban';

const initialColumns = [
  {
    id: 'todo',
    title: 'To Do',
    cards: [
      { id: '1', title: 'Research competitors', tag: 'Research' },
      { id: '2', title: 'Write spec', description: 'Define requirements for v2.' },
    ],
  },
  {
    id: 'in-progress',
    title: 'In Progress',
    cards: [
      { id: '3', title: 'Build prototype', tag: 'Engineering' },
    ],
  },
  {
    id: 'done',
    title: 'Done',
    cards: [
      { id: '4', title: 'Kick-off meeting', description: 'Align on goals and timeline.' },
    ],
  },
];

export default function Example() {
  return <KanbanBoard initialColumns={initialColumns} />;
}

Props

Name	Type	Default	Description
initialColumns	KanbanColumnData[]	—	Initial column and card data. Column and card state is managed internally.
className	string	""	Extra classes on the board container.