Kanbanadmin
Board of columns and cards with pointer and keyboard drag, async moves that roll back on failure, WIP limits, collapsible columns and screen reader announcements.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/kanbanAsync
kanban-async.tsx
import * as React from "react";import { Kanban, moveCard, type KanbanColumn, type KanbanMove } from "@/components/ui/kanban";
const initial: KanbanColumn[] = [ { id: "open", title: "Open", cards: [ { id: "a", title: "Card A" }, { id: "b", title: "Card B" }, ], }, { id: "closed", title: "Closed", cards: [] },];
async function save(move: KanbanMove): Promise<void> { await new Promise((resolve) => setTimeout(resolve, 400)); if (move.toColumnId === "closed" && move.cardId === "b") throw new Error("Card B cannot be closed");}
export default function KanbanAsync() { const [columns, setColumns] = React.useState<readonly KanbanColumn[]>(initial); return ( <Kanban aria-label="Tickets" columns={columns} onMove={async (move) => { await save(move); setColumns((current) => moveCard(current, move.cardId, move.toColumnId, move.index)?.columns ?? current); }} /> );}