shadcn.io is not affiliated with official shadcn/ui
API Health Live Banner Block for Solid
A live-health callout for an API gateway: a green status dot, an all-operational heading, a sentence with the median response time and the one slow minute, a status-page link, and a framed figure of the last 30 minutes as slim latency bars.
Installation
Overview
A live-health callout for Solid with Ark UI, for an API or a platform that wants its health visible before anyone asks. At the start, a green status dot, a heading, a sentence with the median response time and the one slow minute, and a link to the status page; at the end, a framed figure with + marks on its corners draws the last 30 minutes as slim bars, one per minute. Every bar is the foreground tone except the slow one, which takes the warning colour: the exception is the only coloured mark. The median is worked out from the same data as the bars, so the sentence cannot drift from the figure. The page's rails and top rule come from the Guides spine, so the callout lines up between a hero and the next section. It's built from Guides and Status, with a CSS entrance and your theme's tokens for every colour. For status strips above a dashboard, an API landing page, or the top of a docs site.
FAQ
Where do the bars come from, and how do I connect real numbers?
LATENCY at the top of the file is 30 response times in milliseconds, oldest first; the bar heights, the median and the slowest minute are all worked out from it. The block ships with typed data so the preview is stable. To make it live, fetch your gateway's last 30 minutes after the first render and put the result in state, keeping the typed list as the first render so the server and the browser agree.
Fetch in onMount and set a signal with the result.
What makes a bar the warning colour?
Any minute at or above SLOW (200 ms in the file). The status colour stays small on purpose: one bar and the dot, never a tinted panel or coloured text, so the callout reads as healthy at a glance and the exception still stands out. The sentence names the slow minute in words, so the colour is never the only signal.
How is the figure described to screen readers?
The bars are a drawing, so the figure is hidden from assistive technology and the sentence beside it says the same thing in words: the median and the slowest minute. Nothing in the figure is focusable. The heading names the section, so it appears in the page's list of regions.
How does it fit on a phone?
The figure moves under the text and keeps the latest 20 bars, with its caption changed to match; the first ten are dropped with CSS, not removed, so nothing is recomputed. The figure's width follows the column, and nothing scrolls sideways at 320 pixels.
Does it work in a right-to-left layout?
Yes. The text, the link's arrow and the figure's frame follow the page direction, but the bars always keep time order, oldest first, because they carry dir="ltr": a time series that flipped would read as time running backwards. The numbers are wrapped in bdi, so "42 ms" keeps its unit in reading order.