shadcn.io is not affiliated with official shadcn/ui
Scheduled Maintenance Notification Block for React
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.
Installation
Overview
Warn people about planned downtime in a way they can act on, with this maintenance notice for React with Base UI. It is Statusmoor, a status page service, in a framed panel with a plus mark on each corner, in two cells. The first holds the window: a Select of four zones (UTC, New York, Berlin and Tokyo) that re-writes when it starts, when it ends and how long it runs in a Data List, and a Switch, "Remind me 1 hour before", that shows the reminder's time in the chosen zone. The second cell lists the six services it touches, each with a word, Degraded or No impact, and a filled or hollow mark, so colour never carries it. One fixed UTC window is the source of every time, and the date rolls over in New York, which is the sort of thing a visitor would otherwise miss. Guides draw the lines. For planned maintenance, migrations and any event whose time depends on where you are.
FAQ
How do I set my own window and services?
Edit STARTS and ENDS (UTC instants), ZONES (an id, a label and the offset in minutes east of UTC) and SERVICES (a name and whether it is hit). The length, the counts and every time shown are worked out from them. The offsets are fixed for the window's day, so they carry no daylight rules: the New York and Berlin offsets are right for that Saturday only. In your app take the visitor's own zone from Intl.DateTimeFormat().resolvedOptions().timeZone and format with it.
What really happens when I switch the reminder on?
Only this page changes: the switch turns on, the reminder's time is shown and a polite line says it is set in this demo only. Nothing is scheduled, no notification permission is asked for and nothing is sent. In your app save the reminder against the visitor and send it from your server or push service.
Why does New York show Friday?
The window starts at 02:00 UTC on Saturday, which is 22:00 on Friday in New York at UTC-4. The date comes from the same arithmetic as the time, so it rolls back with the clock; Tokyo shows Saturday at 11:00 and Berlin Saturday at 04:00.
How are Degraded and No impact told apart without colour?
Each row has the state in words and a mark that is filled for Degraded and hollow for No impact. No status colour is used on the text or the surfaces, and the count in the heading ("4 of 6") is worked out from the same list.
Is it accessible?
The select is named "Time zone", the switch "Remind me 1 hour before", the window is a description list named for its zone, and one polite line says what changed. Times keep their left-to-right order in a right-to-left page, and the panel does not change height when the zone or the switch changes.
Related
- Pro
Maintenance Mode Settings
Product controlsA maintenance mode settings page you edit in place: a slim admin bar with the switch, the window and a bypass popover, over the visitors' page drawn with a headline and message you click to edit, or the live store when it is off.
- Pro
Planned Maintenance Progress Error
MaintenanceA full-height maintenance page for an online bank that shows a five-segment progress bar with the window's start and expected return, and a Check again button that reports a typed result.
- Pro
Maintenance Completed Success
Servers and storageA confirmation page for a finished maintenance window: planned against actual on one time axis from 02:00 to 05:00, the early finish worked out, and four services that each pick a tick on the axis and say when they came back.
- 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
Update Available Notification
Floating cardsA desktop app's update card at the top end of its window: highlights, one Update now button that runs a simulated download with a real progress bar, then Restart to finish, and Later with a Remind me choice.
- Pro
A day planner's three reminders: a select sets how early each one comes and every time follows it at once, with Snooze in steps of five minutes, Skip and Restore, and a badge on the recurring events.