shadcn.io is not affiliated with official shadcn/ui
Uptime Incident Alert Notification Block for React
An outage notice with the facts of the incident in a quiet column (status, duration, start, regions as chips), an ordered list of updates in a frame, and a Subscribe to updates with Email and Push checkboxes that answers in the demo.
Installation
Overview
Tell people what is down and how to hear when it is fixed, with this uptime alert for React with Base UI. It is Pingmoor, an uptime monitor, in two columns. At the start, outside the frame, the facts of the incident: a Status dot with "Down", how long it has lasted (worked out from the page's fixed now), when it began and the regions it hits as Badge chips. In the hairline frame at the end an ordered list of updates, Detected, Investigating and Identified, newest first, and under it Subscribe to updates, the one Shine Button, with an Email and a Push Checkbox. Subscribing answers "You'll hear about the next update (demo)" and offers an Undo. Guides draw the frame. For status pages, monitors and any notice that asks to be followed.
FAQ
How do I show my own incident?
Edit UPDATES (a time, a title and a sentence each, newest first), REGIONS, DETECTED and AS_OF. How long it has lasted is worked out from those two times, so it reads "12 minutes" for everyone. In your app pass the incident your monitor reports and keep the status line for the latest update.
What does Subscribe do, and what stays local?
Only this page changes: it shows the receipt "You'll hear about the next update by Email and Push (demo)" and nothing is sent or stored. With no channel ticked the button stays in place and the status line asks you to pick one. Undo puts the form back, and a reload clears it. In your app post the channels from subscribe and confirm the address before you say so.
Is red the only sign that it is down?
No. The status is the word Down beside the dot, the duration is written out and the latest update is in heavier type, so the state does not rely on colour. The dot is the only use of the status colour in the block.
Related
- 120Pro
System Alerts by Severity Notification
Incidents and alertsAn infrastructure monitor's alert panel: a count of open alerts by severity, and an accordion of three systems with their facts, an Acknowledge and a one-hour Mute that says when it ends.
- Pro
Urgent Page Acknowledgement Notification
Incidents and alertsAn on-call paging panel with three urgent alerts that demand an answer: severity as a word, a glyph and a weight, a fixed escalation time, and an Acknowledge that stamps the time and takes the escalation line away.
- Pro
A maintenance window you read in your own time zone: a select of four zones re-writes the start, end and length, a switch sets a reminder an hour before, and six services show Degraded or No impact.
- Pro
A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.
- Pro
A project's history as a vertical timeline split in two: six event types as chips with live counts in a start column, and the timeline of who did what beside them, filtered by the types you press, with Load earlier events and a designed empty state.
- Pro
Alert Banner Notification
Incidents and alertsAn operations console's banner bar over a sketch of its app: four notices queue by urgency and show one at a time, with Previous, Next, a link, Dismiss and Snooze all for an hour.