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