# Progress Ring Workflow block

> Workflow status kanban board with collapsible column rails and per-task progress rings

Drag-and-drop status workflow kanban: reorder cards and columns, collapse columns to vertical rails, with progress rings, owner avatars, and status badges. ReUI Kanban, Badge plus shadcn Card, Item, Avatar. Task board, project tracker, sprint board.

- Type: Pro block
- Category: [Kanban Board](https://web.dev.reui.io/blocks/application/kanban-board.md)
- Page: https://web.dev.reui.io/blocks/application/kanban-board/kanban-board-5
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/kanban.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/kanban.md
- MCP: `get_block("kanban-board-5")`
- Built with: Avatar, Badge, Button, Card, Item, Kanban
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A board of 6 columns with 3 folded into rails, uppercase tinted stage badges and a computed progress ring on each card

## Agent notes

- Each `TaskCard` renders a plain div with a kanban item data slot, so cards stay put and only the columns drag
- The ring value is guessed by `getTaskProgress` from `dueLabel` and checklist, attachment or comment counts, so pass a real completion percent
- Replace `BOARD_TASKS`, `BOARD_COLUMNS` and `OWNER_PROFILE_BY_NAME`; Filters, Columns, New task and each `AddCardButton` have no handler

## When not to use

- Cards that move between stages by drag, not only reorderable columns: use [Collapsible Columns](https://web.dev.reui.io/blocks/application/kanban-board/kanban-board-2.md) (`get_block("kanban-board-2")`)

## Third-party libraries

- dnd kit v6: [API reference](https://dndkit.com/legacy/api-documentation/context-provider/dnd-context/), [docs](https://dndkit.com/legacy/introduction/getting-started/) (these are the Legacy docs; dndkit.com's default docs cover the newer @dnd-kit/react, a different API)
- Base UI v1: [API reference](https://base-ui.com/react/components), [docs](https://base-ui.com/react/overview/quick-start), [llms.txt](https://base-ui.com/llms.txt)

## Install

```bash
npx shadcn@latest add @reui/kanban-board-5
```

## About Kanban Board blocks

### When to use

- A full page drag and drop board with a toolbar above stage columns that show their card counts
- A board written for one workflow: bugs, deals, roadmap, support, renewals, releases, hiring or access reviews
- Stage triage where each card shows a due, risk, priority, score or progress signal without opening it

### When not to use

- A bare drag and drop board to build your own columns and cards on: use [Kanban](https://web.dev.reui.io/components/kanban.md) (`get_component("kanban")`)
- A sales workspace where the deal board shares records with a table, sheet or calendar: use the [CRM blocks](https://web.dev.reui.io/blocks/solutions/crm.md)
- The same work items as rows to sort, filter and page, with no stage columns: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)

### Agent notes

- Board order lives in `useState` seeded from data.tsx and `onValueChange` only writes it back, so every move is lost on reload
- Filters, the create button and every other toolbar or column add button render without an `onClick` handler
- A `KanbanColumnHandle` in the column header lets users reorder stages by drag; remove it where stage order is fixed

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