Back to cookbook
Recipe
Kanban with drag and drop
You need a Kanban board with 4 columns and draggable Card items.
Recommended:
Cursor
Prompt
Use @gunjo/ui. Reference https://gunjo.dev/api/specs/patterns/kanban-template. Build a Kanban board: - 4 columns: Backlog / In Progress / Review / Done - Each column header: Badge with count + title + Plus button (variant=ghost) to add a card - Cards: title, AvatarGroup of assignees, Tag list, due-date small text - Drag-and-drop between columns using @dnd-kit. These are not peer deps of @gunjo/ui — install separately: npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities Use DndContext + SortableContext per column. Keep visual rhythm with rounded-md, p-3, gap-2 between cards. Use bg-card for cards, bg-muted/40 for column backgrounds.
Expected output
A draggable Kanban board using KanbanTemplate, Card, AvatarGroup, Badge, Tag.
Components used
KanbanTemplate
Card
AvatarGroup
Badge
Tag