shadcn.io is not affiliated with official shadcn/ui
Security Alerts Account Block for Radix UI
Security alerts grouped by severity, with one set of email, push and text buttons per group, an event list for each, a locked email on Critical and a switch that pauses Info alerts for 24 hours.
Installation
Overview
Let people choose how they hear about changes to their account, with this security alerts panel for React with Radix UI. A hairline frame with a plus mark on each corner holds three ruled bands, Critical, Important and Info, each drawn with a different icon so severity never rests on color. Each band has one Toggle Group of Email, Push and Text that applies to every event in the band, and an "Events in this band" Collapsible that lists what the band covers, such as a changed password or a sign-in from a new country. Critical's Email can't be turned off and the reason is written under the buttons. A Switch in the Info band pauses those alerts for 24 hours and a line beside it names the moment they resume. The first band counts the settings that are on, "7 of 9 channel settings on". The Shine Button saves, an outline Button discards, and a status line at the foot says what changed. It's built from Toggle Group, Collapsible, Switch, Badge, Button, Shine Button and Guides, with a CSS entrance only. It's about severity, not activity: for a matrix of every notification by channel, see the settings notifications panel. For the security page of any app.
FAQ
How do I change the bands and their events?
Edit TIERS. Each band has an id, a name, a one-sentence about, the events it covers (a name and a detail) and a locked channel with its reason, or null. The channels are the CHANNELS list, so adding Slack means one more entry there; the count in the first band is computed from them. The saved state is SAVED, a list of band:channel keys.
What stays local, and how do I make Save real?
Everything: Save copies the draft over the saved copy in this page and says "Saved 2 changes in this demo", and Discard puts the saved copy back. To wire it up, send the keys in on and the pause flag to your API from save, update the saved copy only when it answers and show a failure in the same status line. The pause runs from the fixed AS_OF moment; replace it with the server time and let your backend own the resume time.
Why can't I turn off Email on Critical?
A break-in alert that depends on one phone is a bad design: if the phone is lost, nothing reaches you. So pressing Email on Critical does nothing except say why, and the button is described by the reason under the group, which a screen reader reads with it. Set locked to null for a band if your product allows turning it off.
What does the pause switch do?
It sets one flag, pause, and writes the span it covers ("Info alerts wait from Sun 18 Oct, 09:00 to Mon 19 Oct, 09:00. The rest still arrive."). It never touches the channel buttons, so the count stays at 7 of 9 and turning the pause off brings back exactly what was chosen. The line has a reserved height, so the panel doesn't move when the text changes.
How does it look on a phone?
The band's heading and sentence come first and the three channel buttons fill the row below them, equal in width. The foot with the status line and the two buttons stays pinned to the bottom of the screen while you scroll, so the result of a change is always in view; from the medium breakpoint it is simply the last band.
Is it accessible?
Each group is named by its band's heading and the buttons keep their words, so a screen reader hears "Critical, Email, pressed". Pressed state is shown by a solid fill and by the pressed attribute, never by color alone, and the severity is also in words and in the icon's shape. The disclosure's list is inert while closed, so Tab skips it. The status line is a polite live region present from load.