A drag-and-drop kanban board with columns and cards for tracking tasks across stages like To Do, In Progress, and Done.
import KanbanBoard from "@/components/ui/kanban-board";
export default function KanbanBoardDemo() {
return (
<div className="w-full bg-background p-8">
<KanbanBoard
title="PROJECT: GRID"
columns={[
{
id: "todo",
title: "To Do",
cards: [
{
id: "1",
title: "Design HUD overlay",
description: "Draft the reticle and corner frame styles.",
tag: "Design",
tagVariant: "default",
assignee: "Flynn",
},
{
id: "2",
title: "Wire up drag events",
tag: "Bug",
tagVariant: "danger",
assignee: "Quorra",
},
],
},
{
id: "progress",
title: "In Progress",
cards: [
{
id: "3",
title: "Build kanban board",
description: "Column and card drag and drop.",
tag: "Feature",
tagVariant: "warning",
assignee: "Sam",
},
],
},
{
id: "done",
title: "Done",
cards: [
{
id: "4",
title: "Ship theme tokens",
tag: "Done",
tagVariant: "success",
assignee: "Clu",
},
],
},
]}
/>
</div>
);
}