shadcn.io is not affiliated with official shadcn/ui
Reliability Record API Stats About Block for React
An API's reliability record: a 30-day status grid with one flagged day, the computed uptime beside it, and a framed table of endpoints with volume, p95 latency and success rate.
Installation
Overview
A reliability record for React with Base UI, written for Gatepost, a fictional API gateway. The title states the uptime of the last 30 days. Under it, a band ruled from rail to rail holds a grid of 30 cells, one per day, each in a calm foreground tone except the one day that missed its target, which alone takes the warning colour, and beside it, on a solid divider, the uptime figure and the number of days past target. Below, a framed table lists the four busiest endpoints with their requests, p95 latency and success rate; the single rate under its target gets the same warning dot, and the words. The uptime is computed from the minutes of downtime in the day list, so the grid and the figure always agree. On a phone the grid wraps to three rows and the table scrolls sideways. For status pages, developer portals and trust pages. The figures are example data.
FAQ
How do I connect it to real data?
Replace DOWNTIME (minutes of downtime for each of the last 30 days, oldest first) and ENDPOINTS (path, requests in millions, p95 in milliseconds, success rate in percent). The uptime figure, the incident count, the flagged day and which success rates fall under the target are all computed from them; TARGET_MINUTES and SUCCESS_TARGET are the two thresholds.
Why is only one cell coloured?
A grid of green cells says nothing, and colour alone is not enough for everyone. Normal days use a foreground tone; the warning colour appears only on a day or a rate that really missed its target, and each one is also named in words: the legend says which day and how many minutes, and the table row carries "Under the target" for screen readers.
How is the grid read by a screen reader?
It is an ordered list of 30 days, and each cell carries hidden text such as "Day 17: 8 minutes of downtime, under target". The table is a real table with a caption, column headings and a header cell for every endpoint.
Does it use the catalog Table?
No, it is a native table with the same markup on every base. A native table keeps its caption and its row headers everywhere, including on React Aria, whose own Table is a grid that has neither. On a phone the table scrolls inside a labelled region that a keyboard can focus.
Related
- Pro
Severity Ladder SLA About
Support and contactAn incident tool's four severities as bands, each with its response and resolution drawn as bars to scale on one log time axis, a compliance figure and a framed note on credits.
- Pro
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- Pro
Response Times Matrix About
Support and contactSupport promises as a framed matrix of channels by plan, each cell giving the promised first response and last quarter's median, with the Enterprise column ringed and a status dot per channel.
- Pro
Status Grouped Compliance Badges About
Security and platformA compliance list for a vendor-risk tool grouped by status, In force and In progress, each row a generic programme with its scope, last audit and next step, with a ghost link to request the report.
- Pro
A payroll co-op's report of seven measures over four quarters in Financial and Operational groups, a sparkline on every row, footnotes, and a quarter picker that rings one column.
- Pro
Connected KPI Bar Stats
KPI bands and tilesFour headline figures for a subscription analytics tool in cells that share their hairlines from rail to rail, each with its change on the month before and a tiny sparkline of the last twelve months.