shadcn.io is not affiliated with official shadcn/ui
Workflow Automation Dashboard Block for React Aria
A rule builder with a trigger, up to three field-operator-value conditions and ticked actions, a plain-words sentence and a test of the rule against eight recent events, each Matches or Skipped with its reason.
Installation
Overview
Write an automation rule and see what it would have done before you save it, with this workflow builder for React with React Aria. A hairline frame with a plus mark on each corner holds the rule in three bands: a Native Select for the trigger (a record is created, an invoice is overdue, a ticket is escalated), up to three conditions each made of a field, an operator and a value in an Input, and a list of Checkbox actions (notify a channel, create a task, tag the record). The fields and operators follow the trigger, and the rule is read back as a plain sentence. Under it the rule is tested against eight recent events: each is listed as Matches or Skipped with the reason ("Amount 120 is not over 500"), and the count updates with every keystroke. The Shine Button in the pinned foot saves the rule, and Discard puts the saved one back. It's built from Native Select, Input, Checkbox, Badge, Button, Shine Button and Guides. For automation settings, CRMs and support tools.
FAQ
How do I fill it with my triggers and events?
Edit TRIGGERS. Each has the fields a rule can test (a label and whether it is a number or text), the eight recent events with one value per field, and the condition a new rule starts with. Operators follow the field: numbers can also be over or under, text can also contain. Add a trigger and it appears in the select, with its own fields and test events.
How is an event matched?
Every condition that has a value must hold. The first one that fails is the reason shown, in words ("Plan is Free, not Business"); an event that passes everything says "All 2 conditions hold". A condition with no value yet is left out of the test and refused when you save. Text is compared without regard to case.
What does Save rule do?
It keeps the draft in the page and says so; nothing runs. It refuses, and focuses the field, when a condition has no value, and refuses a rule with no action ticked. Save and Discard are always there: with nothing to save they answer instead of doing nothing. Changing the trigger starts a fresh condition for that trigger.
What stays local, and how do I wire it for real?
The events are typed and the rule is never stored or run. To make it real, replace the events with a query for your last day or hundred of events, run the same matching on the server when the rule fires, and store the saved rule as data (the trigger, the conditions and the actions).
Is it accessible?
Every control is named, including the conditions ("Condition 2, operator"), and the remove button says which condition it removes. The result of every edit is in the list itself as text, not colour. The foot is the one polite status region and speaks problems, the unsaved state and the result. React Aria's checkboxes and buttons use press events, which the block handles.