shadcn.io is not affiliated with official shadcn/ui
Smart Alerts Dashboard Block for React Aria
Seven open alerts in a list with severity, state and folded duplicates, and beside it the chosen alert with its escalation chain as steps, plus Acknowledge, Snooze, Escalate and Mute.
Installation
Overview
Triage what is firing and hand it to the right person, with this alert management panel for React with React Aria. A hairline frame with a plus mark on each corner holds a list of seven open alerts, each row giving its severity, its state (Firing, Acknowledged, Snoozed or Muted), its title and how many duplicates were folded into it. Beside the list the chosen alert shows its service, severity, the time it first fired and how long it has been open, a short description and its escalation chain as Steps: who is paged, in which role, and the rung that is paged now. The foot acts on the chosen alert: a Shine Button acknowledges it, a Dropdown Menu snoozes it for 30 minutes, 1 hour or 4 hours, an outline Button escalates it to the next rung and a ghost one mutes it. The sentence above the panel counts what is firing, acknowledged, snoozed and muted, and follows every action. Below the medium breakpoint the list sits above the detail. It's built from Steps, Dropdown Menu, Badge, Button, Shine Button and Guides. For on-call tools and incident consoles.
FAQ
How do I fill it with my alerts?
Edit ALERTS and CHAINS. An alert has a title, a service, a severity, how many duplicates were folded into it, the minutes it has been open and the chain that pages for it; a chain is an ordered list of people with a role and the minutes to wait before the next rung. Every time on the panel is worked out from the one AS_OF moment, so the first-fired time and the open duration always agree.
What do the four actions do?
Acknowledge marks the alert as handled and clears a snooze. Snooze quiets it for the length you pick and says so on the alert. Escalate moves the page to the next rung of the chain and answers "Already at the last rung" when there is none. Mute silences the alert until you press Unmute. Each one updates the row, the badge, the chain and the sentence above the panel, and says what it did in the foot's status line.
What stays local, and how do I wire it for real?
Everything: nothing is paged, snoozed or silenced anywhere, and the handling lives in the page. To make it real, send each action to your paging service, read the alerts and the current rung from it, and replace the typed minutes with its timestamps. Keep the "Already ..." answers: they tell a keyboard user why nothing changed.
Is it accessible?
The list rows are buttons and the chosen one is marked as current. Severity and state are written as words, never only a dot, and a row says how many duplicates were folded. The chain is a named ordered list whose current rung says "Firing", "Acknowledged" or "Snoozed" in text. The actions stay in the page whatever their state: one with nothing to do answers instead of going dead.
How does the Snooze menu behave?
It opens above the button, since the buttons are at the bottom of the panel, and closes after a choice. Arrow keys move between the three durations and Escape closes it with focus back on Snooze. React Aria's menu is as wide as its trigger unless it is given a width, so the menu has its own.