shadcn.io is not affiliated with official shadcn/ui
Split Status Page Block for React Aria
A 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.
Installation
Overview
A status page for React with React Aria, as a split. At the start, the title states the fleet's 90-day uptime, computed from the minutes of downtime typed per component, then a dot with "All systems operational" and the time it was checked, and four components as a list of rows: each has its name, a filled square with the word "Operational", and its own 90-day uptime. At the end, "Recent changes": three releases with a type tag (an icon and a word), a version, a fixed date, a linked title and one sentence, and a "View all releases" link. A solid divider runs from the page's top rule down between the halves with a + where they meet; on a phone the halves stack with the status first and a rule between. It's built from Guides, Badge, Status and Button, with your theme's tokens for every colour and CSS only for the entrance.
FAQ
How do I change the components and their uptime?
Edit COMPONENTS at the top of the file: each has a name and the minutes it was down in the last 90 days. A component's uptime is 1 - minutes down / minutes in 90 days, to two decimals, and the figure in the title is the same sum over all four, so they always agree. The numbers in the block are example data.
How would I show a component that is not operational?
The state is the word and a filled square at the end of the row. Add a state to the component, show a different word with a different glyph (a half square or a ring, never colour alone) and change the line above the list; the one real alert may use the status dot. Keep the word, so the row reads the same without the glyph.
Where do the recent changes come from?
From the typed RELEASES list: a kind (New, Improved, Fixed or Security, each an icon and a word), a version, an ISO date written as text from a month table so the server and the browser agree, a title that links to the release and one sentence. "View all releases" is a ghost button that takes your link.
The button renders a link when it has an href.
How does the divider reach the top rule?
The page column is the grid itself, so the halves carry their own padding and the end half's divider starts at the top rule. A + marks where they meet on large screens; below lg the same crossing is drawn as a rule across the top of the stacked second half.