Animations
NumberTicker
Animates a numeric value counting up (or down) to the target, with four visual variants: default, card, gradient, and badge.
Preview:1280px
Default
0 tests0 components0.0%
Card Variant
Total Users
0↑
Avg Latency
0.0ms↓
Uptime
0.00%
Gradient Variant
0+E2E Tests Passing
0Components
Badge Variant
0new↑0issues↓0%coverage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Target numeric value to animate to. |
| variant | 'default' | 'card' | 'gradient' | 'badge' | 'default' | Visual style of the ticker. |
| label | string | - | Descriptive label (card/gradient/badge variants). |
| trend | 'up' | 'down' | - | Trend arrow indicator (card/badge variants). |
| prefix | string | '' | Text prepended before the number. |
| suffix | string | '' | Text appended after the number. |
| decimals | number | 0 | Number of decimal places to display. |
| duration | number | 1000 | Animation duration in ms. |