Centered Uptime Status Rows Hero Block for React

Map your status provider's daily history onto SERVICES: each service has a name, its uptime as it should read, and its incidents, one per bad day, with how many days ago it was (0 is today) and whether the service was degraded or down. Days without an incident are operational. Everything else follows from that data: each row's dot and status word (today's health), its 30-day bar, the sentence screen readers hear, the incident count in the footer and the pill above the headline. Fetch it on the server and refresh it every few minutes, so the panel is never stale.

Add or remove entries in SERVICES. The rows are a list divided by hairlines between the header and footer bands, so any number fits, though five to seven keep the hero short. A long service name ends in an ellipsis rather than squeezing its bar; for longer names, widen the first column in the row's grid classes (sm:grid-cols-[8rem_…], md:grid-cols-[10rem_…]).

Yes. "Service status" is an h2 over a list, and each service is one item read as its name, its 30 days in words ("degraded on 1 day in the last 30 days"), today's status and its uptime. The bars and dots are hidden from assistive technology, and color never speaks alone: each row shows its status as a word at every width. The pill is a status region, read when its text changes, and the footer link is named by where it goes.

A foreground tone for operational days (bg-foreground/70), so the Shine Button stays the only primary colour, and the theme's status tokens only where something went wrong: bg-warning for degraded days and bg-destructive for days down, set once in the HEALTH map with each health's word and dot. Because they're tokens, the bars follow your theme and its dark mode. Change a class in HEALTH to restyle every bar, dot and label of that health together.

Below the sm breakpoint each row takes two lines: the service's name with its status and uptime on the first, and its bar of 30 days across the full width under them, so every day stays wide enough to see. From sm up the name, the bar and the figures share one line in three columns. The headline wraps, balanced, at text-4xl, and the calls to action wrap when they don't fit side by side; the Shine Button ends within the first screen.

Use it when reliability is what you sell, for an API, a hosting platform or a data service, and you can back the claim with each service's history. Use a metrics hero when the story is growth, like customers, requests or revenue, rather than how dependably each part of your product stays up.