shadcn.io is not affiliated with official shadcn/ui
Public Status Page Monitoring Block for Vue
A whole-screen public status page: a headline worked out from the data, a matrix of three regions by twelve weeks of uptime in a ramp of weights, and a Subscribe to updates field that answers in the demo.
Installation
Overview
Tell customers how a platform has behaved, region by region, with this public status page for Vue with Ark UI. It is the page of Gullbeacon, a hosting platform, and it fills the screen: the page's side rails run its full height and one band crosses it between two rules with a plus mark where each meets a rail. The product's mark, a headline worked out from the data ("Degraded in Singapore") and one sentence ("Two of three regions are fully operational. Checked at 14:20 UTC.") sit over a matrix with a row for US East, Frankfurt and Singapore and a cell for each of the last twelve weeks. Each cell holds that week's uptime, counted from typed minutes of downtime, in a ramp of foreground weights; a triangle marks a degraded week and a hatch with a cross an outage week, so no colour carries the meaning. Every row ends with its twelve-week uptime. The cells are one tab stop with the arrow keys, Home and End, and choosing one reads it ("Singapore, week of 5 Oct: 98.51%, 2 h 30 min down"). Under the matrix a Field with an Input takes an email address and the Shine Button Subscribe to updates, the one coloured control, answers "Subscribed, in this demo". Guides draw the rails and the band; the entrance is CSS only. For status pages, hosting and any service that publishes its record.
FAQ
How do I fill the matrix with my own uptime?
Edit REGIONS: each region lists the minutes of downtime in each of twelve weeks, oldest first, and FIRST_WEEK is the Monday of the first one. A week's uptime is 100 - minutes / 10080 * 100, cut to two decimals so the page never claims more than it measured, and its look comes from three limits (DIP_FROM, DEGRADED_FROM, OUTAGE_FROM). The headline and the sentence are worked out from the latest week of each region, so they follow the data.
What does Subscribe to updates do, and what stays local?
Nothing leaves the page. An empty or malformed address gets a sentence under the field and focus; a good one waits 700 ms behind a spinner and swaps the form for "Subscribed, in this demo", with a Change address button. The matrix, the minutes and "Checked at 14:20 UTC" are typed examples, not measurements. To wire it, post the address to your status provider where the code says so and keep the busy state until it answers.
How can you tell a good week from a bad one without colour?
By weight, shape and words. A clean week is the palest cell, a dip is a little darker, a degraded week is darker still with a triangle, and an outage is a hatch with a cross. Each region also names its latest state in words (Operational, Degraded, Outage) and every cell is a button whose name says the week, the uptime and the minutes down. The page uses the status colour on one icon at most.
Can I use it with a keyboard and a screen reader?
The 36 cells are one tab stop. Left and Right move along a region's weeks, Up and Down move to the same week of the next region, and Home and End jump to the ends of a row. Pressing Enter or Space on a cell reads it in a polite status line. Cells that are hidden on a phone are skipped.
How does it look on a phone?
The matrix keeps the newest eight weeks of each region (the older four are hidden, and a line says "Showing the newest 8 of 12 weeks"), each row's uptime still counts all twelve, and the email field and Subscribe to updates sit under the matrix on the first screen. The form and its result share one cell, so the page never changes height.