shadcn.io is not affiliated with official shadcn/ui
Service Status Integration Billing Block for React Aria
A status page for the services a bill depends on: a 30-day strip per service with uptime worked out from its incidents, keyboard-navigable days that name themselves, and the latest incidents.
Installation
Overview
Tell customers whether a billing problem is yours or the service's, with this service status section for React with React Aria. A hairline frame with a plus mark on each corner holds three ruled rows for Meterfox, a metered-billing platform: Card payments, Tax calculation and Invoice email. Each row has an outline Badge with today's state in words, an uptime figure worked out from the typed incidents, and a strip of the last 30 days, one cell a day: quiet for a day with no incident, hatched for a degraded one and solid for an outage. A strip is one tab stop: the arrow keys, Home and End move through its days, and the chosen day names itself under the strip, like 12 Oct: degraded for 40 minutes. Under the rows, the two latest incidents are listed with their service, day and length, with a key to the cells. The foot holds Get status updates, the only Shine Button. Cells are ruled in foreground weights, never in red and green. For billing platforms, status pages and account settings.
FAQ
How is the uptime worked out?
From INCIDENTS alone: each service loses its outage minutes in full and its degraded minutes at half, over the 30 days' 43,200 minutes. Card payments lost 20 plus 12 minutes, which is 99.93 percent. The rule is the demo's own, so state yours next to the figure in your app.
How do I fill it with real incidents?
Replace INCIDENTS (an ISO date, a level, minutes, a service and a title) with your monitoring's export, and AS_OF with today's date. Every cell, today's word, the uptime and the latest-incident list are derived from that one list, so they cannot disagree.
How does the keyboard work?
Each strip is a group with one cell in the tab order, the chosen one. Left and Right Arrow, Home and End move to another day and choose it; Enter and Space choose the focused one. Each cell is named with its service, its day and its state, and the strip stays left to right in a right-to-left page, because time does.
How is state shown without colour?
By fill: a quiet cell, a hatched one and a solid one, each with an outline, plus the words in the key and in the sentence under the strip. The status dot beside a service uses the foreground colour.