# Shadcn Dynamic Overlay

> Kanban board with dynamic overlay

- Type: example, free and open source (MIT)
- Component: [Kanban](https://reui.io/components/kanban.md)
- Page: https://reui.io/components/kanban/c-kanban-2
- Docs (Base UI): https://reui.io/docs/components/base/kanban.md
- Docs (Radix UI): https://reui.io/docs/components/radix/kanban.md
- MCP: `get_example("c-kanban-2")`
- Registry item: https://reui.io/r/styles/base-nova/c-kanban-2.json
- Uses: Avatar, Badge, Button, Card, Kanban

## Best for

A live copy of the dragged card or whole column under the pointer, drawn by an overlay function

## Install

```bash
npx shadcn@latest add @reui/c-kanban-2
```

## About Shadcn Kanban

### When to use

- Boards that move cards between status columns by drag and drop
- Roadmap and workflow views where each column is one stage of the work

### When not to use

- A finished tracker for issues, tickets or releases with rich cards: use the [Kanban Board blocks](https://reui.io/blocks/application/kanban-board.md)
- A sales deal pipeline with values, owners and stage forecasts: use the [CRM blocks](https://reui.io/blocks/solutions/crm.md)
- A single flat list reordered by drag, with no columns: use [Sortable](https://reui.io/components/sortable.md) (`get_component("sortable")`)

### Agent notes

- Save moves in `onValueCommit`, which fires once per drop with `previousValue` for rollback; `onValueChange` also fires mid drag
- Drag listeners live on `KanbanItemHandle` and `KanbanColumnHandle`; a card or column without one cannot be dragged
- `KanbanColumnHandle` is hidden until its column is hovered or the handle has keyboard focus, so keep the column title outside it

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.