Number Ticker
An interactive ticker animation for representing numerical values, counters, or percentages.
Preview
Installation
pnpm dlx vibe-ui-kit@latest add number-ticker
Dashboard Metrics
Startup Milestones
Usage
import { NumberTicker } from "@/components/ui/number-ticker"<NumberTicker value={100} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Target numerical value to count up or down to |
direction | "up" | "down" | "up" | Counting direction towards target value |
delay | number | 0 | Delay before starting count animation in seconds |
decimalPlaces | number | 0 | Number of decimal places to display |
className | string? | "" | Additional classes for the container |
This NumberTicker component smoothly animates numeric transitions up or down using spring physics.
Contributors
JS
Jenish Sabhadiya