Number Ticker
A number whose digits roll into place, for stats and KPIs.
Headcount
248
Payroll this month
LKR 61.5M
Attrition
4.2%
A Zynactra addition, not part of shadcn/ui. It's CSS only, so it works in server components and without JavaScript, in every theme.
Usage
import { NumberTicker } from "@zynactra/ui/number-ticker"<NumberTicker value={248} />
<NumberTicker value={64925500} format={{ style: "currency", currency: "LKR", notation: "compact", maximumFractionDigits: 1 }} locale="en-LK" />
<NumberTicker value={0.042} format={{ style: "percent", minimumFractionDigits: 1 }} />| Prop | Type | Default | |
|---|---|---|---|
value | number | The number to show | |
format | Intl.NumberFormatOptions | Currency, percent, decimals, compact | |
locale | string | runtime locale | Pass one in server-rendered apps, so the server and the browser format the same way |
animateOnMount | boolean | true | Roll in from 0 when it first appears. Changes always roll |
Guidelines
- For the headline numbers of a view: stats, KPIs, totals. Not for numbers in tables, which should stay still so people can compare them.
- Put it in
font-monolike any stat. It already uses tabular figures, so digits don't jump around. - Screen readers and copy and paste get the plain formatted value. Under reduced motion it just changes.