shadcn.io is not affiliated with official shadcn/ui
Escalation Chain Account Block for Radix UI
An ordered chain of three ways to be reached for urgent alerts, each with a switch, a verified date and a wait of 1 to 30 minutes, and a Run a test button that writes the minute-by-minute log.
Installation
Overview
Let people decide how an urgent alert chases them, with this escalation chain for React with Radix UI. A hairline frame with a plus mark on each corner holds an ordered list of three ways to reach someone, Push to your phone, Text message and Email. Each has a Switch, the word Verified with the day it was checked, where it goes, and a Number Input for how many minutes to wait for an answer before moving to the next, from 1 to 30. The header's Shine Button, Run a test, writes a log from the settings as they are ("0:00 Push sent. 5:00 No reply, text sent.") in a column beside the chain, labelled Simulated, and a line under it says when the log is out of date. Nothing is sent. On a phone the log sits under the chain. It's built from Switch, Number Input, Button, Shine Button and Guides, with a CSS entrance only. For an on-call page, urgent security alerts or any app that escalates.
FAQ
How do I change the channels?
Edit STEPS for what each way is (its name, what it reaches, the day it was verified and the word the log uses) and START for the order, the on state and the waits. The log is logOf, a plain function of the settings: the first enabled way is sent at minute 0 and each next one after the previous wait. Add a way by adding an entry to both lists.
Is anything sent? What stays local?
Nothing is sent and the log says so twice, in its heading and under it. The test is arithmetic on the settings in this page. To make it real, run the same chain on your server for a real test alert and show its actual delivery log in the same column; keep the label honest if any step is skipped.
How are the waits checked?
Each wait is a whole number from 1 to 30. A value outside that range is shown with the reason under its field, and Run a test refuses until it is fixed. The number field accepts typing and the arrow keys.
What does it mean that the log is out of date?
The log is a snapshot of the settings at the moment you pressed Run a test. If you then change a switch or a wait, the line under the log says so, instead of silently showing steps that no longer match, and running the test again replaces it. The panel keeps its height throughout.
Is it accessible?
The chain is a real ordered list, each switch and number field is named for its way ("Text message in the chain", "Minutes to wait for Text message") and Verified is written in words with its date. The log is an ordered list with its time first; times and addresses keep their order in a right-to-left page. The status line is a polite live region present from load.