shadcn.io is not affiliated with official shadcn/ui
Status Page Onboarding Block for Solid
A setup panel for a public status page: four components each set to operational, degraded or down, an address field, and a drawn browser with the page those choices make, headline and rows included.
Installation
Overview
Let people see the page their customers will read while they assemble it, with this status page step for Solid with Ark UI. It's a setup panel of Heartwick, a status-page tool, ruled by Guides. At the end are the controls: the page's address in an Input and four components (API, Dashboard, Database, CDN), each a Segment Group of Operational, Degraded and Down. At the start is a drawn browser holding the page: the address in its bar, a headline worked out from the four states, and a row for each component with its state in words and a glyph. Publish page is the only colored control, a Shine Button.
FAQ
How is the headline worked out?
From the four states alone. If every component is down it reads “Major outage”; if some are, “Partial outage:” and their names; if none are down but some are degraded, “Degraded performance:” and their names; otherwise “All systems operational”. Nothing is typed twice: headlineOf takes the states and returns the sentence.
Why are there no green and red states?
A status carried only by color fails for people who cannot tell the colors apart. Each row says its state in a word and has its own glyph (a check, a triangle, a cross), and the page stays in the theme. If your own status page uses color too, keep the word and the glyph beside it.
What does the address field do?
It writes into the browser bar of the preview as you type. It is checked for its shape only: labels of letters, digits and hyphens, then a top-level domain. A bad address shows its problem when you leave the field or press Publish page, which then focuses the field; the preview keeps the last good address.
What does Publish page do?
It says “Published in this demo” in the status line and under the preview. Changing any state or the address afterwards takes the published mark away again, since the page you published no longer matches the one you see. Nothing is monitored, hosted or sent.
What stays local in the demo, and how do I wire it?
Everything: the components, their starting states and the update time are typed in the file. In your app load the components from the person's workspace, save their states and address when they press Publish page, and keep updating the real page from your monitoring.