shadcn.io is not affiliated with official shadcn/ui
No Workflows Empty State Block for React
A full-height first-workflow screen for a pipeline builder: three drawn nodes (a trigger, a step, an output) that turn solid as you pick an option for each, a sentence that writes itself, and one Create workflow button.
Installation
Overview
Turn an empty workflows page into the first workflow, with this no workflows empty state for React with Base UI. It's the first-run page of Sluiceway, a pipeline builder: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. In the band sit the heading, one sentence and a drawing of three nodes in a row joined by arrows: a circle for the trigger, a hexagon for the step and a square for the output, each only dashed because nothing is chosen. Under every node is a Select in a Field; choosing an option turns its node solid, an arrow turns solid once both of its ends are chosen, and the sentence beneath writes itself, "When new data arrives, run the AI model, send the result." The Shine Button, the only colored control, creates the workflow once all three are chosen; pressed early it says which one is missing and takes you to it. On a phone the three nodes become three rows, each with its Select beside it. The rails and band come from Guides, and the whole block uses CSS transitions only. For the empty state of any automation, pipeline or integration builder.
FAQ
What happens when I press Create workflow, and what stays in the page?
The three choices are kept in the page's state. Pressing the button with all three chosen swaps the sentence for a short result ("Workflow 1 is ready") in the same space, so the page never changes height, and says "Created in this demo, so nothing runs." Nothing is saved, scheduled or executed; Start over puts every node back to dashed. To wire it for real, send the three values to your API where the code says so and show the saved workflow in its place.
Why is the button quiet until everything is chosen, and what does it do before that?
It stays in the page and in the tab order, but looks muted until the trigger, the step and the output are all chosen. Pressing it earlier does not fail silently: the status line names the first node still to choose ("Choose the step first.") and focus moves to that Select.
Is the drawing readable without seeing it?
The drawing is decorative and hidden from assistive technology. The same information is in the three labelled Selects and in the sentence, and a polite status line announces each choice ("Trigger: New data arrives.").
Where do the options come from, and can I change them?
They are three short typed lists at the top of the file, each option with a label and the clause it adds to the sentence. Replace them with your own triggers, steps and outputs; the sentence and the count are worked out from whatever the lists hold.
Related
- Pro
An automations page with no rules: one sentence you finish with three selects (a trigger, a priority, an action), a count of how often it would have run on fourteen sample events, a row of dominoes that fall, and one Create automation button.
- Pro
A catalog tool with no categories: one field for a path such as Clothing / Shoes / Boots, a tree of boxes under All categories that grows as you type with dashed boxes for what is new, and one Add category button.
- Pro
First Project Empty State
First runA full-height first-run screen for a weekly planner: a name field and one Create project button at the start, and at the end a drawn drafting table whose blank sheet is only dashed until the project exists.
- Pro
No Webhooks Empty State
Developer toolsAn event relay's empty endpoint list as a builder: a URL, four events to tick, a code window with the JSON body and a curl command, and one Add endpoint button that lists the endpoint and sends a simulated test event.
- Pro
Getting Started Empty State
First runA getting-started card for an empty dashboard: four setup steps as real checkboxes, a headline that counts down with a progress bar, and a drawn trail up a hill with a flag that stands at the done count.
- Pro
Centered Sign In Login
Centered formA full-height sign-in page for a team chat app: the product's mark, Google and GitHub rows with lettermark tiles, an or rule, email and password checked on submit, and one Sign in button with a simulated wait and its result.