shadcn.io is not affiliated with official shadcn/ui
Workflow Rules Settings Block for Ark UI
A workflow rules window with a rail of three automations and a rule builder that rewrites the rule as a sentence while you edit its trigger, its match-all-or-any conditions and its ordered actions.
Installation
Overview
Let people build an automation and read it back in plain words, with this workflow rules window for React with Ark UI. A fixed-height window opens with its own top bar: the title, an outline Discard and a Shine Button to save the rules. At the start a rail lists three automations, each with its name, the day it last ran and a Switch to turn it on or off. Beside it the chosen automation is a builder. At the top the rule is a sentence ("When a ticket is created and priority is Urgent, assign to On-call and notify #support"), and below it a numbered flow of three stages: the trigger in a Native Select; the conditions, each a field, an operator and a value, matched all or any with a Segment Group, added and removed; and the actions (assign to, add a label, notify), added, moved up or down and removed. Every edit rewrites the sentence at once. A rule that is on but has no action, or a condition with no value, is refused when you save and the window takes you to it. On a phone the rail and the builder are two panes with a Back button. It's built from Native Select, Segment Group, Switch, Input, Button, Shine Button and Guides, with a CSS entrance only. For a helpdesk, CRM or operations product, or any setting that turns a few choices into a rule.
FAQ
How do I add my own fields, actions and rules?
Edit the constants at the top. FIELDS lists what a condition can test, with its operators and the values to choose from (an empty list means free text, like the subject); KINDS lists the actions with their options and the verb phrase used in the sentence; TRIGGERS lists what starts a rule; and SAVED holds the automations. The sentence, the rows and the checks are all built from these lists, so a new entry shows up everywhere.
How is the sentence worked out?
By one function over the rule. It starts with the trigger, adds the conditions joined with "and" or "or" depending on the match (wrapped in brackets when "any" joins more than one), and ends with the actions in order, or "do nothing" if there are none. Changing a field resets its operator and value to the first sensible choice, so a row can never say something like "priority contains Urgent".
What is refused when I save?
An automation that is on and has no action, and an automation that is on with a condition whose value is empty. The status line names the rule, the window opens it and focus moves to the control that needs attention. Automations that are switched off aren't checked, so you can keep a draft. Rules take at most four conditions and four actions, and the buttons say so when you reach that.
What happens when I press Save, and what stays local?
Nothing leaves the page and no rule runs. The block keeps the saved automations and the ones being edited, and counts how many settings differ, so the foot can say "3 changes not saved yet." Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back. The last-run dates are typed sample data. To make it real, send the edited rules to your server in the save handler. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.
How do I reorder actions with a keyboard?
Each action has Move up and Move down buttons named for its place, so reordering never needs a pointer. After a move, focus stays on the same action's button, or on the other one if the pressed button is no longer usable at an end, and the status foot says where the action went. There is no drag handle.
How does it look on a phone?
The window keeps its height and shows one pane at a time. The rail comes first; choosing an automation opens the builder and moves focus to its heading, and Back returns to the rail with focus on the row you left. The conditions and actions stack their selects two to a line.