Live Stats
A metrics strip that's actually live: ticking numbers, scrolling sparklines and delta badges that flip.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Each tick pushes a data point into every series; deltas know that lower is better for latency and errors. Plug in your own data or use the simulation, which is labelled as simulated.
Installation
$ npx shadcn@latest add https://guetix.com/r/live-stats.json
Uses the shadcn CLI. It creates components/guetix/live-stats.tsx and installs nothing else.
Usage
example.tsx
import { LiveStats } from "@/components/guetix/live-stats";
export default function Example() {
return <LiveStats />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| stats | { label; value; unit?; decimals?; color }[] | — | Metrics. |
| every | number | 1200 | ms between ticks. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Numbers are real text; Regular shows a static snapshot.