An animated count-up number that eases between values with tabular figures and Intl formatting.
AnimatingReduced motionCurrency
4,280
<NumberTicker value={metric} format={{ maximumFractionDigits: 1 }} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { NumberTicker } from '@chanrg/4ui';<NumberTicker value={metric} format={{ maximumFractionDigits: 1 }} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | required | Target value. |
duration | number | 900 | Animation length in milliseconds. |
format | Intl.NumberFormatOptions | — | Number formatting options. |
locale | string | browser | Formatting locale. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Announces only the settled value through a polite live region.
- Renders instantly under reduced motion.