shadcn.io is not affiliated with official shadcn/ui
Status Page Dashboard Block for Solid
A status panel for six components with a banner worked out from their states, a 30-day strip per component whose days you can read, an active incident with its updates, two resolved incidents and a subscribe form that sends nothing.
Installation
Overview
Show customers what is up and what is not with this status page for Solid with Ark UI. A hairline frame with a plus mark on each corner opens with a banner, "Partial outage" in this demo, that is worked out from the six components below it rather than typed. Each component is a row with its state word, a strip of 30 day cells (darker means more downtime, and 60 minutes or more is an outage day) and its uptime over those 30 days, added up from the same strip. Pressing a day reads what happened that day in a line under the rows. Under the strips sit the active incident with its updates, newest first, the last two resolved incidents and a Subscribe to updates form built from Field, Input and a Shine Button that checks the address and says it sent nothing. It's also built from Badge and Guides. For product status pages and incident communication.
FAQ
How do I fill it with my components?
Edit COMPONENTS: each has a name, a now state (Operational, Degraded or Outage) and events, the days with downtime as a day number from 0 (the oldest of the 30) to 29 (today), the minutes down and a note. The banner, the counts, the day cells and every uptime figure are worked out from those, so nothing is typed twice. UPDATES and RESOLVED hold the incident text.
How do the day strips work?
All six strips are one grid with a single tab stop. Arrow keys move one day or one component, Home and End jump to the ends of a strip, and Enter or Space pins the day and reads it in the line under the rows. Each day is named with its component, date and state, so the strip is also readable without colour or sight: the weight of a cell is a hint, the words are the information.
What decides the banner?
The components' own states. One or two in Outage give Partial outage, three or more give Major outage, Degraded alone gives Degraded performance, and all Operational gives All systems operational. The sentence under it names the components behind it.
Does Subscribe to updates send anything?
No. It checks that the address has a name, an @ and a domain, shows a problem next to the field if it does not and moves focus to it, and otherwise says in a polite status line that nothing was sent and you are not subscribed. To make it real, post the address to your mailing provider in the submit handler and confirm with a double opt-in.