A kanban flattened into collapsible status groups: drag a task by its grip within or across groups while the others make room, with work-in-progress limits that turn red when exceeded. Keyboard users lift with Space, move with the arrows and drop or cancel, with every move announced.
npx shadcn@latest add https://hyperblur.dev/r/list-kanban-grouped.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/list-kanban-grouped.tsx.
import { ListKanbanGrouped } from "@/components/hyperblur/list-kanban-grouped"
<ListKanbanGrouped defaultCollapsed={["done"]} onChange={(tasks) => console.log(tasks)} />| Prop | Type | Default | Description |
|---|---|---|---|
| groups | { id: string; label: string; color: string; limit?: number; done?: boolean }[] | In progress, In review, Up next, Done | Status groups in order. limit adds a WIP meter; done strikes through titles. |
| tasks | KanbanTask[] | Controlled tasks. Pair with onChange. | |
| defaultTasks | KanbanTask[] | 7 sample tasks | Initial tasks when uncontrolled: id, title, group, tag, tagColor, assignee, due and points. |
| onChange | (tasks: KanbanTask[]) => void | Called with the reordered list after every move. | |
| accent | string | "#2f7bff" | Color of the dragged and lifted row outline. |
| defaultCollapsed | string[] | [] | Group ids collapsed on first render. |