Shadcn React Flow Blocks: Workflow Builders, Agent Trees and Run Canvases
A node canvas is the rare UI where the library is the easy part. React Flow gives you nodes, edges, panning and zoom in an afternoon. What it does not give you is a node that looks like your product, an edge a user can re-point without breaking the graph, a right click menu that knows which steps are safe to delete, or an answer to what happens when someone drags a step into a cycle.
These 4 blocks are that second half. Each one is a working canvas with its own node types, its own inspector, and its own rules about what a user may change: a lead routing workflow, a collections agent tree, a nightly pipeline run replayed in dependency order, and a growth map tying initiatives to a north star metric.
They ship as source. The graph is a typed local array, so the canvas you install is the canvas you keep, wired to your own data instead of a provider you cannot see into.
All Flow Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Flow 1 Automation workflow canvas with step cards showing owner, duration and last run status
- Flow 2 AI agent flow tree with auto layout, named branch paths and add step buttons on every connector
- Flow 3 Data pipeline run canvas with dependency-ordered replay and a human approval gate
- Flow 4 Growth impact map linking initiatives to a north star metric, with correlation scored metric links
Nodes That Look Like Your Product
A default React Flow node is a rounded box with a label. Every block here replaces it with a real card.
Steps are built from shadcn Item with a ReUI IconTile carrying the glyph, so a node reads like the rest of your app rather than like a diagram. The workflow canvas puts the owner avatar, the duration and a status Badge in a footer strip. The agent tree carries the app it calls, Stripe, Neon, Claude, ClickUp, Resend or Slack, and a run strip of dot separated facts like 1,842 tokens, USD 0.031 or 42ms.
The growth map goes further and builds its cards from ReUI Frame, because an initiative card and a metric card need the same shell with different contents: percent done and a Progress bar on one, a role label with the current period's value and its delta on the other.
Edges are nodes' equals here. A condition fork is labelled Yes and No, a branch in the agent tree carries its path name, and a metric link carries the correlation coefficient recorded for it. Attachments hang off a separate bottom port on dotted edges, so a connection or a model reads differently from a step that runs.
Auto Layout, and When Not to Use It
2 of the 4 canvases lay themselves out with dagre. The other 2 deliberately do not, and the split is the useful part.
The agent tree runs dagre top to bottom and exposes it as a Tidy tree button, which also re-arms layout after a manual drag. The growth map runs it left to right, which is the reading order for a driver tree ending at a north star.
The workflow and the pipeline run keep hand authored positions, because both describe something a human arranged on purpose: a routing diagram someone drew, and a DAG whose shape is the documentation. Auto layout would relocate a canvas its owner already understands.
Where layout is automatic the blocks still keep a snap to grid toggle, a reset layout action and edge reconnection, so a user can override the algorithm rather than fight it.
The Rules a Canvas Needs
Most node editor demos let you delete anything and connect anything. A real one cannot.
The pipeline run replays in dependency order using a topological sort over its edges, with a cycle fallback, so a task starts only once everything upstream has passed and anything left unready is rewritten as blocked upstream. Its approval gate cannot be deleted at all, and approving it releases every downstream task and runs them, with an 8 second undo.
The growth map checks a relink for duplicates and cycles before accepting it, and promoting a new north star demotes the old one rather than leaving two. The agent tree checks branch names for uniqueness and auto numbers a collision, surfacing the problem as inline field validation instead of a toast you can miss.
The workflow canvas carries a real undo and redo stack, capped at 50 entries, that coalesces a drag into one entry instead of 60. It also warns, in a ReUI Alert inside the inspector, when a step exists that nothing routes to.
Editing Without Leaving the Canvas
Every block puts its editing affordances in 3 places, because people reach for different ones.
A selected node shows a toolbar. A right click opens a ContextMenu with the same actions, so add step after, view, edit, duplicate and delete are one gesture from anywhere. The agent tree adds a fourth: an add step button that cross fades in on the connector itself when you hover or keyboard focus it, so a step lands exactly where the flow forks.
Details open in an inspector panel with view and edit modes, and tabs where a node has more than one concern, Settings beside Wiring on the pipeline run and Settings beside Links on the growth map. The panel is an overlay above 1024px and a Sheet below it, so the canvas keeps its width on a laptop and the inspector takes the screen on a phone.
Destructive actions confirm, and the reversible ones do not bother: a delete opens a dialog, while a north star promotion or an approval simply toasts with an undo attached.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (344) Browse 344 Shadcn Application blocks across 24 categories.
- Shadcn Data Grid Blocks (39) Browse 39 Shadcn Data Grid blocks across 8 categories.
- Shadcn Solutions Blocks (74) Browse 74 Shadcn Solutions blocks across 10 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
- Shadcn AI & Agents Blocks (18) Browse 18 Shadcn AI & Agents blocks across 2 categories.
Frequently Asked Questions
Do I need a React Flow licence to use these?
Which block should I start from?
Is the graph wired to a backend?
Do the run states and test results actually change, or are they static?
Do they work on a phone?
How do I install a flow block?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.