Columns and cards with smooth FLIP drag-and-drop, keyboard movement and empty states. The drop slot grows to the card's height.
"use client";
import { useState } from "react";
import {
KanbanBoard,
KanbanBoardCard,
KanbanBoardCardMeta,
KanbanBoardCards,
KanbanBoardCardTitle,
KanbanBoardColumn,
KanbanBoardColumnCount,
KanbanBoardColumnEmpty,
KanbanBoardColumnHeader,
KanbanBoardColumnTitle,
type KanbanBoardValue,
} from "@/components/ui/kanban-board";
const columns = { backlog: "Backlog", progress: "In progress", review: "In review" };
const tags = {
Security: "bg-destructive/14 text-destructive",
Support: "bg-primary/14 text-primary",
Billing: "bg-secondary text-secondary-foreground",
Data: "bg-muted text-muted-foreground",
};
const cards: Record<string, { title: string; tag: keyof typeof tags; due: string }> = {
"OPS-112": { title: "Rotate staging API keys", tag: "Security", due: "Due Oct 3" },
"OPS-118": { title: "Document the on-call handoff", tag: "Support", due: "No due date" },
"OPS-121": { title: "Migrate invoices to the new ledger", tag: "Billing", due: "Due Oct 9" },
"OPS-124": { title: "Fix CSV export for archived rows", tag: "Data", due: "Due Oct 1" },
};
export default function KanbanBoardDemo() {
const [value, setValue] = useState<KanbanBoardValue>({
backlog: ["OPS-112", "OPS-118"],
progress: ["OPS-121", "OPS-124"],
review: [],
});
return (
<div className="flex min-h-[420px] w-full items-center justify-center p-6">
<div className="w-full max-w-[860px]">
<KanbanBoard variant="board" value={value} onValueChange={setValue}>
{Object.entries(value).map(([column, ids]) => {
const label = columns[column as keyof typeof columns];
return (
<KanbanBoardColumn key={column} value={column} label={label}>
<KanbanBoardColumnHeader>
<KanbanBoardColumnTitle>{label}</KanbanBoardColumnTitle>
<KanbanBoardColumnCount />
</KanbanBoardColumnHeader>
<KanbanBoardCards>
{ids.map((id) => {
const card = cards[id];
if (!card) return null;
return (
<KanbanBoardCard key={id} value={id} label={card.title}>
<KanbanBoardCardTitle>{card.title}</KanbanBoardCardTitle>
<KanbanBoardCardMeta>
<span className={`rounded-[6px] px-1.5 text-[11px]/[18px] font-medium ${tags[card.tag]}`}>
{card.tag}
</span>
<span>{id}</span>
<span>{card.due}</span>
</KanbanBoardCardMeta>
</KanbanBoardCard>
);
})}
</KanbanBoardCards>
<KanbanBoardColumnEmpty>Nothing waiting for review.</KanbanBoardColumnEmpty>
</KanbanBoardColumn>
);
})}
</KanbanBoard>
</div>
</div>
);
}Part of Uai — browse the full library on 21st.dev.