Columns of cards you can drag between lists and reorder, with a placeholder slot and add buttons.
npx shadcn@latest add https://hyperblur.dev/r/kanban-board.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/kanban-board.tsx.
import { KanbanBoard } from "@/components/hyperblur/kanban-board"
<KanbanBoard
columns={[
{ id: "todo", title: "To do", cards: [{ id: "a", title: "Design review" }] },
{ id: "doing", title: "In progress", cards: [] },
{ id: "done", title: "Done", cards: [] },
]}
onChange={(next) => console.log(next)}
/>| Prop | Type | Default | Description |
|---|---|---|---|
| columns | KanbanColumn[] | required | Columns with id, title and cards. Each card has id, title and optional tag and tone (a CSS color for the tag dot). |
| onChange | (columns: KanbanColumn[]) => void | Called with the new columns after a drop, a keyboard move or an added card. | |
| newCardLabel | string | "New card" | Title given to cards created with the add button. |
| color | string | "#2f7bff" | Accent color for the drop slot and focus ring. |