shadcn.io is not affiliated with official shadcn/ui
Status Bar Footer Block for Svelte
The slimmest live footer for a cloud host: one band with the wordmark and copyright, a status dot and sentence, the p95 response time and three links.
Installation
Overview
A single-band status footer for Svelte with Ark UI. At the start sit the wordmark and the copyright; beside them the host's state as a dot and a sentence ("All systems normal") and the p95 response time ("p95 142 ms"); at the end, three links in a nav labelled Footer (Status, Docs, Contact). There are no columns and no boxes: the spine's top rule and rails are the only lines. The dot takes the catalog Status colour for the real state (success, warning or destructive) and the sentence says the same in words, so colour is never the only signal. The state and the figure are typed constants, not a request, so the block is a plain server component. On a phone the band wraps: wordmark first, then the state, then the links.
FAQ
Where does the status come from?
From two typed constants at the top of the file: SYSTEM (a state of operational, degraded or outage, and the p95 in milliseconds) and the SUMMARY and DOT tables that turn the state into a sentence and a dot colour. The block fetches nothing. To make it live, read your status endpoint where the page renders and pass the values into SYSTEM; the markup does not change.
Why is the dot green when everything is fine?
It is one dot for one real state, so it uses the Status component's own tokens: success for operational, warning for degraded, destructive for an outage. Colour is never alone: the sentence beside it names the state, and a screen reader hears "System status: All systems normal". Everything else in the band stays in the foreground and muted tones, so the dot is the only coloured thing in it.
Which landmarks does it have?
The block is a footer element, the page's content-info landmark when placed outside main. The three links sit in one nav labelled Footer. The status sentence is plain text, not a live region, because it is rendered from the data rather than updated in place.
How does the band behave on narrow screens?
Below 1024 pixels the parts stack with room between them, and each part wraps if it must: the wordmark and copyright, then the dot and sentence beside the p95 figure, then the links. The hairlines between the parts are hidden when they would end a line. Nothing scrolls sideways at 320 pixels.