shadcn.io is not affiliated with official shadcn/ui
Alert Rules Account Block for Radix UI
Alert rules written as sentences with four selects each, an on and off switch and move up and down buttons, plus a tester that tries one of five events and marks every rule Fires or Does not fire.
Installation
Overview
Let people say when they want to be told, with this alert rules section for React with Radix UI. A hairline frame with a plus mark on each corner holds a numbered list of rules, each one a sentence: "When [a sign-in comes from a new country] [and it fails twice], [email me] and [sign that session out]." The four bracketed parts are Selects inside the sentence, so a rule is changed by reading it and picking different words. Each rule has a Switch and Move up and Move down buttons (rules run top to bottom, and there is no dragging). A band under the rules tries an event: choose one of five typed events and every rule shows a Fires or Does not fire Badge with the condition that decided it, such as "Needs two failed attempts, which this event doesn't have". The Shine Button saves the rules and a status line counts what changed. It's built from Select, Switch, Badge, Button, Shine Button and Guides, with a CSS entrance only. For a security page, an uptime monitor or any app where people write their own alerts.
FAQ
How do I add my own events, conditions and actions?
Each part of the sentence is a typed list near the top of the file: TRIGGER_ITEMS, QUALIFIER_ITEMS, TELL_ITEMS and THEN_ITEMS. The tester's events are EVENTS, each with the facts a condition looks at (wrong passwords, trusted or not, night or not), and metBy and verdictOf turn a rule and an event into Fires or Does not fire. Add a qualifier by adding an item and a branch in metBy; the rest follows.
Is anything really tested or sent?
No. The test is arithmetic in this page: it compares the rule with the facts of the event you picked and writes the result. No alert is sent, and Save keeps the rules in this page only. To make it real, run the same comparison on your server against real events and send the saved rules from save; show a failure in the status line.
What do Move up and Move down do?
They swap the rule with its neighbour and keep focus on the button you pressed, even after the rule has moved, so you can press it again. At the top or bottom the button is marked unavailable but stays in the tab order, and pressing it does nothing. The order matters because rules run from the top. There is no drag handle on purpose: the buttons work with a keyboard and a screen reader, which a drag does not.
How do the sentences look on a phone?
Each select takes the full width and the words that join them ("When", "and") sit between, so a rule reads top to bottom as a short list. The switch and arrows stay at the end of the first line. The result line under each rule has a reserved height, so trying an event never moves the page.