Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Smart Alerts Dashboard Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Triage what is firing and hand it to the right person, with this alert management panel for Solid with Ark UI. 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.

How does it look on a phone?

The list comes first, the detail follows it and the four actions sit in a pinned foot, two across. Choosing an alert changes the detail below the list and keeps its height.