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.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
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.