# Shadcn Flow blocks

> Node canvas blocks on React Flow for workflow and agent builders, pipeline run replays, and impact maps.

- Type: Pro blocks (Application)
- Page: https://web.dev.reui.io/blocks/application/flow
- Blocks: 4
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- An editable node canvas for automation workflows or AI agent steps, with a side inspector per step
- A run view for a scheduled data pipeline: task states, retries and a human approval gate
- A driver map that ties initiatives to the input metrics and north star they are meant to move

## When not to use

- An overview page of KPI tiles, charts and work lists with no editable node graph: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)
- A first run setup sequence that walks a new user through screens one at a time: use the [Onboarding blocks](https://web.dev.reui.io/blocks/application/onboarding.md)
- Operating live AI agent runs: tool permissions, approvals and evaluation reports: use the [Agents blocks](https://web.dev.reui.io/blocks/solutions/agents.md)

## Agent notes

- Graph edits stay in local `useNodesState` and `useEdgesState`; no block persists `nodes` or `edges`, so wire your own load and save
- Each block fills `h-svh` under its own header bar; swap it for a parent owned height when you mount it inside an app shell
- Requires `@xyflow/react`; flow-canvas.tsx imports its stylesheet and `FLOW_THEME` maps its colors onto your theme tokens

## Third-party libraries

- React Flow v12: [API reference](https://reactflow.dev/api-reference), [docs](https://reactflow.dev/learn), [llms.txt](https://reactflow.dev/llms.txt), used by 4 of 4 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 4 of 4 blocks
- Dagre v3: [API reference](https://github.com/dagrejs/dagre/wiki#configuring-the-layout), [docs](https://github.com/dagrejs/dagre/wiki), used by 2 of 4 blocks

## Blocks

- [Automation Builder](https://web.dev.reui.io/blocks/application/flow/flow-1.md): Automation workflow canvas with step cards showing owner, duration and last run status. Best for an automation graph with undo and redo, a canvas lock, snap to grid, a minimap and an Update button that tracks unsaved edits.
- [AI Agent Builder](https://web.dev.reui.io/blocks/application/flow/flow-2.md): AI agent flow tree with auto layout, named branch paths and add step buttons on every connector. Best for a top down agent tree laid out by dagre, with a header model picker and a Run test that tallies passed, failed and skipped steps.
- [Pipeline Run Monitor](https://web.dev.reui.io/blocks/application/flow/flow-3.md): Data pipeline run canvas with dependency-ordered replay and a human approval gate. Best for a replay with Run, Pause and Stop, a header progress bar, an approval gate that holds the run and a retry for the failed task.
- [Growth Impact Map](https://web.dev.reui.io/blocks/application/flow/flow-4.md): Growth impact map linking initiatives to a north star metric, with correlation scored metric links. Best for a 4 column map from initiatives through input metrics to a north star and KPIs, with 7 day, 6 week and 12 month values.

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.