shadcn.io is not affiliated with official shadcn/ui
Downtime Schedule Changelog Block for React
A week of maintenance windows on a 24-hour Gantt, seven day rows with a bar for each window, a planned or emergency word, and a time-zone Select that re-labels every time.
Installation
Overview
A maintenance schedule for React with Base UI, written for Quietwindow, a fictional maintenance-communications tool. A start-aligned header carries a title worked out from the windows (how many this week and how many hours in all) and a time-zone Select (UTC, UTC+01:00, UTC-05:00). Under it a framed Gantt has seven day rows, Monday to Sunday, on a 24-hour axis, with a bar for each window labelled with the service and the hours it spans. A planned window is a solid bar and an emergency one an outlined bar with a warning icon. Choosing a zone re-labels every time and slides the bars. Below the desktop width the axis gives way to a list of days. It's built from Select, Badge and Guides, with CSS transitions and your theme's tokens for every colour. For status pages, maintenance notices and customer communications. The schedule is example data.
FAQ
How do I change the windows?
Edit SLOTS at the top of the file. A window has a day (an index into the seven days), a start in minutes after midnight UTC, a duration in minutes, a service and a kind, Planned or Emergency. The hours in the title, the bars and the times are worked out from them. Keep each window between 05:00 and 22:30 UTC so it never crosses midnight in any of the three zones.
How does the time-zone Select work?
Each zone is a fixed offset in minutes, listed in ZONES: no clock, no daylight saving. Choosing one adds the offset to every start time, so the labels change and the bars slide along the axis, and a polite line says which zone is shown. To add a zone, add an offset, and check that no window crosses midnight in it.
How is an emergency told from a planned window?
By shape and by word: a planned window is a solid bar, an emergency one an outlined bar with a warning icon, and the list of windows that screen readers and phones get names each kind in text.
How does a screen reader get the Gantt?
The drawing is hidden and the list of days and windows, with the service, the hours in the chosen zone and the kind, is what is read. A day with no work says so.
How does it fit on a phone and in a right-to-left layout?
Below the desktop width the axis is replaced by that list, one block for each day with its windows. The axis itself always runs left to right. In a right-to-left layout the text and rows mirror, while versions, dates, percentages and signed changes, which are data, keep their order.
Related
- Pro
Split Status Page
Incidents and uptimeA split status page for a hosted status service: the 90-day uptime and four components with their state at the start, the three most recent releases at the end, and a divider between them.
- Pro
Tabbed Window Uptime History
Incidents and uptimeA tabbed window of ninety-day uptime for an uptime monitor: one tab per service, a large uptime figure that rolls to the new service, a strip of ninety daily bars and a three-row table of incidents.
- Pro
Incident Timeline Changelog
Incidents and uptimeOne incident as a split: a summary at the start and its four updates on a hairline at the end, each with a stage badge, a time in UTC, an elapsed chip counted from the first update and one sentence.
- Pro
Blue Green Swap Zero Downtime Deploy
Deploys and rolloutsA blue-green swap for a deploy tool: two environment cells with instance dots, a 0, 10, 50 and 100 percent traffic toggle that redraws the split bar, the dots and the phase list, and a fixed Downtime 0 s.
- Pro
Percentage Fill Region Rollout
Deploys and rolloutsSix regions as rail-to-rail rows whose own background fills to the rolled-out percentage, with latency, a state shape and word, an end date, and a traffic-weighted overall figure.
- Pro
Lanes With Gates Release Train
Deploys and rolloutsA release-train table: a lane per train, a column per station (Dev, Staging, Canary, Production), each cell a gate shape and word with a hover card of its checks, and the departure time at the end of the lane.