Kanban Board

Drag-and-drop Kanban board with real-time sync via WebSockets. Supports multiple boards, swimlanes, card assignments, and priority labels out of the box.

ReactUI ComponentsBuilt with Claude

2.3k

Stars

12.5k

Installs

Deps

Comments

Install / Copy

npx create-freestack-module kanban-board

Code Preview

index.tsx

import { DndContext, closestCenter } from "@dnd-kit/core";
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";

export function KanbanBoard({ columns, onDragEnd }) {
  return (
    <DndContext collisionDetection={closestCenter} onDragEnd={onDragEnd}>
      <div className="flex gap-4 overflow-x-auto p-4">
        {columns.map((column) => (
          <div key={column.id} className="w-72 shrink-0 rounded-lg bg-gray-100 p-3">
            <h3 className="mb-3 font-semibold">{column.title}</h3>
            <SortableContext items={column.cards} strategy={verticalListSortingStrategy}>
              {column.cards.map((card) => (
                <SortableCard key={card.id} card={card} />
              ))}
            </SortableContext>
          </div>
        ))}
      </div>
    </DndContext>
  );
}