Workflow Builder Block React component
An automation builder on a dotted canvas: a trigger, steps and an if/else condition that splits into Yes and No branches, + buttons on every line that insert emails, waits, webhooks and more, an inspector to rename or delete steps, a Test run that lights up each step in turn, and a Draft / Live switch.
About the Workflow Builder Block component
Workflow Builder Block is the editor of an automation tool. A trigger starts the flow, steps run one after another, and a condition splits the path into Yes and No branches, all drawn as cards joined by lines on a dotted canvas.
Press + on any line to drop in an email, a wait, a webhook, a tag or an owner assignment; click a card to rename or delete it in the side panel. Test run plays the flow step by step with a glowing dot moving down the lines and checks appearing on each card, and a switch takes the workflow from Draft to Live.
When to use it
Use it in marketing automation, CRM and help desk rules, onboarding sequences, internal tools or any product that lets people chain actions.
Start people from a template like this one rather than a blank canvas, and keep the step library short.
Installation
Add the Workflow Builder Block component to your project with the shadcn CLI. It lands in components/workflow-builder.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/workflow-builderOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<WorkflowBuilder /> accepts 9 props (required ones are marked *).
| Prop | Type | Default |
|---|---|---|
| name | string | "Route new demo requests" |
| trigger | object | DEFAULT_TRIGGER |
| trigger.id* | string | — |
| trigger.kind* | "trigger" | "action" | "condition" | "wait" | — |
| trigger.title* | string | — |
| trigger.detail* | string | — |
| trigger.icon* | "form" | "sparkle" | "split" | "deal" | "chat" | "mail" | "clock" | "webhook" | "tag" | "user" | — |
| steps Steps before the condition. | { id: string; kind: NodeKind; title: string; detail: string; icon: IconName }[] | DEFAULT_STEPS |
| condition | object | DEFAULT_CONDITION |
| condition.id* | string | — |
| condition.kind* | "trigger" | "action" | "condition" | "wait" | — |
| condition.title* | string | — |
- namestringDefault: "Route new demo requests"
- triggerobjectDefault: DEFAULT_TRIGGER
- trigger.id*string
- trigger.kind*"trigger" | "action" | "condition" | "wait"
- trigger.title*string
- trigger.detail*string
- trigger.icon*"form" | "sparkle" | "split" | "deal" | "chat" | "mail" | "clock" | "webhook" | "tag" | "user"
- steps
Steps before the condition.
{ id: string; kind: NodeKind; title: string; detail: string; icon: IconName }[]Default: DEFAULT_STEPS - conditionobjectDefault: DEFAULT_CONDITION
- condition.id*string
- condition.kind*"trigger" | "action" | "condition" | "wait"
- condition.title*string
Show all 19 propsShow fewer
| condition.detail* | string | — |
| condition.icon* | "form" | "sparkle" | "split" | "deal" | "chat" | "mail" | "clock" | "webhook" | "tag" | "user" | — |
| yes | { id: string; kind: NodeKind; title: string; detail: string; icon: IconName }[] | DEFAULT_YES |
| no | { id: string; kind: NodeKind; title: string; detail: string; icon: IconName }[] | DEFAULT_NO |
| onPublish | (live: boolean) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- condition.detail*string
- condition.icon*"form" | "sparkle" | "split" | "deal" | "chat" | "mail" | "clock" | "webhook" | "tag" | "user"
- yes{ id: string; kind: NodeKind; title: string; detail: string; icon: IconName }[]Default: DEFAULT_YES
- no{ id: string; kind: NodeKind; title: string; detail: string; icon: IconName }[]Default: DEFAULT_NO
- onPublish(live: boolean) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Workflow Builder Block FAQ
- Can I add my own step types?
- Yes. Add entries to the LIBRARY array with a title, default detail, icon and kind. Icons come from a small built-in set you can extend.
- Does it support more than one condition?
- This block shows one if/else split, which covers most automations. For deeper trees, render nested branch columns the same way.
- Does Test run call my backend?
- No, it is a visual dry run that follows the main path and the Yes branch. Replace the timers in test() with your run API and set each node's state from the results.
- How does it fit on phones?
- The inspector moves below the canvas, and the canvas keeps a minimum width so branches stay readable, scrolling sideways inside the card.
- Is it accessible?
- Every node is a toggle button, every + has a label naming its branch, the step menu is a role=menu with focus on the first item and Escape to close, Live is a switch and the run result is announced.
