NumberTicker
Animated count-up from zero to target number.
When to Use
- Animate dashboard KPI values on page load for visual impact.
- Show real-time counter updates (e.g. active sessions, download counts).
- Add currency or percentage context via the
PrefixandSuffixprops.
0
0.0
$0
0.0%
0
Fast (500ms)
0
Slow (3000ms)
API Reference
NumberTicker
| Property | Type | Default | Description |
|---|---|---|---|
| Value | double | 0 | Target value to animate to. Changing this triggers a new animation from the previous value. |
| StartValue | double | 0 | Initial value to count from on first render. |
| DurationMs | int | 1500 | Animation duration in milliseconds. |
| Decimals | int | 0 | Number of decimal places to display and animate through. |
| Prefix | string? | null | Text rendered before the number (e.g. $). |
| Suffix | string? | null | Text rendered after the number (e.g. %, k). |
| Class | string? | null | Additional CSS classes. Use Tailwind font/size utilities to style the number. |
Related Components
- KpiCard — Dashboard tile that can embed a NumberTicker as its value.
- Statistic — Big-number statistic display with label and unit.
- TextReveal — Word-by-word reveal animation on scroll.