shadcn.io is not affiliated with official shadcn/ui
Live Indicator Banner Block for Vue
A heartbeat callout for a monitoring tool: a framed status dot that sends out one ring on each poll, an all-systems-operational heading, a line with how long ago it checked and the p95 latency, and a status-page link.
Installation
Overview
A heartbeat callout for Vue with Ark UI, for a status line that proves it is alive. A small framed cell with + marks on its corners holds a green status dot; each time the page polls, one ring leaves the dot and fades in a second. Beside it, a heading, "All systems operational", and a line with how long ago it checked and the p95 latency, with a link to the status page at the end. The first reading is 14 seconds old; then the page polls every 30 seconds, resetting "Checked ... ago" and moving the p95, and stops after eight polls. The age counts from the first render in the browser, so the server's markup is stable. It's built from Guides and Status, with CSS for the ring and your theme's tokens for every colour. For monitoring tools, deploy strips and status pages.
FAQ
Is it really polling something?
No: it simulates a poll so the preview is always healthy. Every 30 seconds POLL_MS it takes a new time and the next number from P95, which restarts the ring and the age. To connect it, call your health endpoint at that moment and put the real latency and the time of the answer in state. It stops after MAX_POLLS so a left-open tab doesn't poll forever; raise it or remove the cap for a dashboard.
Does the ring loop forever?
No. It is a one-second burst each time the page polls, drawn with CSS and restarted by giving it a new key, so between polls the dot is still. With reduced motion there is no ring at all: the dot and the text carry the state.
Why does the age show nothing before the page runs?
The age is worked out from the clock, which the server can't know. Until the first render in the browser the line holds an invisible placeholder of the same width, so nothing shifts when "14 seconds ago" appears. After that a one-second tick recounts it, in seconds for the first minute and in minutes after, written with Intl.RelativeTimeFormat ("now", "1 second ago"). The words change in place, with no animation, so the line stays still and readable.
Why is nothing announced on each poll?
A routine "all good" that interrupted a screen reader every 30 seconds would be noise, and the age changes every second. The heading and the line are plain text that can be read at any time. If your block can turn bad, put the changed state in a polite status line that is in the page from the start and fill it only when the state changes.