Number Ticker
Pro
A number that counts smoothly from its previous value to the new one.
Revenue this month
€0Customize
1.1s
Installation
Number Ticker is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy number-ticker.tsx into components/ui and run npm install motion.
Usage
import { NumberTicker } from "@/components/ui/number-ticker";
<NumberTicker value={revenue} format={(n) => `€${Math.round(n)}`} />Props
4 properties| Property | Type | Default | Description |
|---|---|---|---|
| value | number | — | The number to count to. |
| format | (n: number) => string | — | Formats each frame. Defaults to a rounded, grouped number. |
| duration | number | 1.1 | Seconds for each count. |
| className | string | — | Extra classes for the number. |
Dependencies: motion