shadcn.io is not affiliated with official shadcn/ui
No Workflows Empty State Block for Vue
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 Vue with Ark 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.