shadcn.io is not affiliated with official shadcn/ui
Server Status Carousel Block for React
Six regions with a state glyph and word, a thirty-day uptime strip, days up, median response time and the last incident, sorted worst first, by region or by speed only when you press a segment.
Installation
Overview
Show how each region is doing at a glance, with this server status carousel for React with Base UI. Beaconwell, a status page, gives each of six regions (Frankfurt, Virginia, Singapore, Sydney, Mumbai and São Paulo) its own hairline cell: the state as a glyph and a word (Operational, Degraded or Outage), a thirty-day strip of bars whose height and weight rise with the severity of each day, the days fully up out of thirty, the median response time and the last incident with its date and length, or "No incidents in 30 days". The header counts the regions by state. A toolbar band holds a Segment Group "Sort by: Worst first, Region, Fastest"; pressing a segment re-orders the cells, returns to the first and says so. The foot holds the counter, a dot for each step and Previous and Next Buttons. Three cells show from the large breakpoint, two from medium, and one with the next peeking on a phone. The ruled bands come from Guides. Nothing is monitored: the days and times are made-up example data.
FAQ
How is the state and the strip drawn from the data?
Each region holds thirty typed days as digits (0 up, 1 degraded, 2 outage), oldest first. The state shown is the latest day's, the "days up" figure counts the zeros, and the strip draws one bar per day, taller and heavier as it gets worse, so it reads in greyscale without colour. A screen reader skips the drawing and hears one sentence: "Uptime, last 30 days: 27 up, 2 degraded, 1 with an outage."
How does the sort work?
"Worst first" orders by the current state (outage, degraded, operational), then by fewest days up, then by name. "Region" is A to Z and "Fastest" is the lowest median response time. All three are total orders, and the order changes only when you press a segment, which also returns the track to the first cell and says "Sorted by worst first. First of 6."
Where does the incident line come from?
Each region types what the last incident was and how long it lasted; the date is derived from the latest day that was not fully up, counted back from AS_OF, so it can never disagree with the strip. A region with no bad day shows "No incidents in 30 days".
How does it work with a keyboard?
Tab reaches the sort switch, Previous, the dots and Next. With focus inside the track's panel, the arrow keys move by one cell (mirrored in a right-to-left layout) and Home and End jump to the ends. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled.
What stays local in the demo?
Everything. The days, response times and incidents are typed in REGIONS and nothing is checked or fetched. To wire it for real, fill each region's days from your monitor's daily roll-up (one digit per day), its median from your latency metric, and the last incident from your incident log.