Live Counter Card
An active user counter with a pulsing dot, a static sparkline, and an honest refresh cadence footnote.
An active user counter with a pulsing dot, a static sparkline, and an honest refresh cadence footnote.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Live Counter Card shows 142 active users now alongside a pulsing live dot (animate-pulse, bg-foreground/20) and a 120x28 inline SVG sparkline tracing 12 recent snapshots from 118 up through 145 and back to 142. A footnote below the border tells users exactly what they are looking at: Counts refresh every 10 seconds. This is a snapshot, not a live socket feed. No chart lib, no WebSocket; the honesty note is the key feature.
The snapshots array drives the sparkline polyline. The activeUsers const is the current reading. The footprint stays in one small card at max-w-sm.
Reach for this block on an admin overview or operations dashboard where a live-ish user count adds value but a full WebSocket integration is out of scope. Pair a polling interval with a state update to replace the static value; keep the footnote.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a concurrent active user counter. Other live counters:
Tip: always name the refresh cadence in the card; a number with no staleness context looks precise when it is not.