Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
0
import { NumberTicker } from "@/registry/magicui/number-ticker";
export function NumberTickerDemo() {
return (
<NumberTicker
value={100}
className="whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white"
/>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/number-ticker
Example
Decimal
0
import { NumberTicker } from "@/registry/magicui/number-ticker";
export function NumberTickerDemo() {
return (
<NumberTicker
value={5.67}
decimalPlaces={2}
className="whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white"
/>
);
}
Start Value
80
import { NumberTicker } from "@/registry/magicui/number-ticker";
export function NumberTickerDemo() {
return (
<NumberTicker
value={100}
startValue={80}
className="whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white"
/>
);
}
Usage
import { NumberTicker } from "@/components/magicui/number-ticker";<NumberTicker value={100} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | int | 0 | The value to count to |
direction | up | down | "up" | The direction to count in |
delay | number | 0 | The delay before counting |
decimalPlaces | number | 0 | The number of decimal places to show |
startValue | number | 0 | The value to start counting from |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development