Number Ticker
newCounts up to a number on a spring, with tabular digits.
Requests, 24h
0+8.2%Uptime, 30d
90.00%
SLA 99.9%p95 latency
0ms
−14 msInstallation
npx shadcn@latest add @blank/number-tickerUsage
import { NumberTicker } from "@/components/ui/number-ticker"<NumberTicker value={99.98} startValue={90} decimalPlaces={2} />Digits are tabular, so the number keeps its width while it counts and nothing
beside it shifts. It starts when scrolled into view and springs again whenever
value changes, which suits live stats. Frames are written straight to the
DOM, not through React state. Under reduced motion it shows value at once.
Props
| Prop | Type | Default |
|---|---|---|
value | number | — |
startValue | number | 0 |
direction | "up" | "down" | "up" |
delay | number | 0 |
decimalPlaces | number | 0 |
locale | string | "en-US" |