shadcn.io is not affiliated with official shadcn/ui
Workflow Builder Kanban Block for Vue
An automation drawn as four columns (Trigger, Condition, Action, Complete) with numbered steps, exactly one trigger, and a dry run that lists the steps in order.
Installation
Overview
Lay out an automation as a board with this workflow builder for Vue with Ark UI. A hairline frame with a plus mark on each corner holds four columns that run in order, Trigger, Condition, Action and Complete, joined by drawn arrows that mirror in right-to-left languages, and seven steps. Each card shows what the step does, a detail line, its kind in an outline Badge with an icon, and the number it runs as; the steps run in column order and then top to bottom, so every move renumbers them. A workflow has exactly one trigger: a second card dropped into Trigger is refused, and the refusal names the trigger already there. "Dry run" in the foot lists the steps in order in a log under the board, or says what is missing, and nothing runs. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu; a polite status line reports each move and Reset restores the workflow. On a phone the columns scroll sideways in one named region. For automation tools, rule editors and any ordered pipeline.
FAQ
How do I fill it with my own steps?
Edit COLUMNS and START. A step has an id, the column it starts in, a title, a detail line and the step number it runs as; the numbers are rewritten by settleCards after every move, so only the order of START matters. Services and tools in the steps are made up.
Why can't I add a second trigger?
A workflow starts from exactly one event. refusalOf refuses a card entering Trigger while another card is in it, and the drag, the keyboard and the menu all ask it. Move the current trigger out first, or drop the new one in an empty Trigger column. A workflow with no trigger is allowed on the board, but the dry run says so.
What does Dry run do, and does it run anything?
It builds a list from the cards in run order and shows it in the log under the board, so you can read the workflow as sentences: "1 When a form is submitted, 2 If the plan is Team, 3 Create a ticket in the helpdesk". It does not call anything. To run a workflow for real, send the ordered steps to your engine from the same place and show its result in the log, which is a live region, so screen readers hear it.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the step's title. Space or Enter picks it up, the arrow keys move it (left and right change column, and swap in right-to-left languages), Home and End jump to the ends, Space drops it and Escape puts it back. Each step is announced in the status line.