All Flow Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

• Automation Builder Automation workflow canvas with step cards showing owner, duration and last run status
• AI Agent Builder AI agent flow tree with auto layout, named branch paths and add step buttons on every connector
• Pipeline Run Monitor Data pipeline run canvas with dependency-ordered replay and a human approval gate
• Growth Impact Map 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 (303) Browse 303 Shadcn Application blocks across 23 categories.
• Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
• Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
• Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
• Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 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.