0
import { CounterNumber } from "@/registry/aliimam/components/counter-number"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<CounterNumber value={1234} size="xl" />
</div>
)
}
+0.0%
import { CounterNumber } from "@/registry/aliimam/components/counter-number"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<CounterNumber
value={23.8}
decimalPlaces={1}
prefix="+"
suffix="%"
size="2xl"
className="text-purple-600 dark:text-purple-400"
/>
</div>
)
}
$0.00
import { CounterNumber } from "@/registry/aliimam/components/counter-number"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<CounterNumber value={99.99} currency="USD" decimalPlaces={2} size="xl" />
</div>
)
}
0.000
import { CounterNumber } from "@/registry/aliimam/components/counter-number"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<CounterNumber value={123.456} size="xl" decimalPlaces={3} />
</div>
)
}
$0 USD
import { CounterNumber } from "@/registry/aliimam/components/counter-number"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<CounterNumber value={500} size="xl" prefix="$" suffix=" USD" />
</div>
)
}
0
import { CounterNumber } from "@/registry/aliimam/components/counter-number"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<CounterNumber value={1000000} size="xl" separator="." />
</div>
)
}
0.0%
import { CounterNumber } from "@/registry/aliimam/components/counter-number"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<CounterNumber
value={85.5}
decimalPlaces={1}
suffix="%"
size="xl"
color="success"
/>
</div>
)
}
Installation
pnpm dlx shadcn@latest add https://aliimam.in/r/counter-number.json
Usage
import { CounterNumber } from "@/components/ui/counter-number"<div className="flex flex-wrap gap-8 items-end">
{/* Default */}
<CounterNumber value={12345} />
{/* With prefix/suffix */}
<CounterNumber value={86} suffix="%" size="xl" color="success" />
{/* Decimals */}
<CounterNumber value={3.14159} decimalPlaces={3} size="lg" />
{/* Currency */}
<CounterNumber value={1299.99} currency="USD" decimalPlaces={2} size="xl" color="primary" />
{/* Locale + separator */}
<CounterNumber value={1000000} locale="de-DE" separator="." size="lg" />
{/* Mono spacing for layout stability */}
<CounterNumber value={2025} preserveAspectRatio className="font-medium" />
</div>Props
| Prop | Type | Default |
|---|---|---|
| value | number | — |
| startValue | number | 0 |
| duration | number | 1000 |
| decimalPlaces | number | 0 |
| prefix | string | "" |
| suffix | string | "" |
| separator | string | "," |
| currency | string | — |
| locale | string | "en-US" |
| size | "sm" | "md" | "lg" | "xl" | "2xl" | "md" |
| color | "default" | "primary" | "secondary" | "success" | "warning" | "error" | "default" |
| preserveAspectRatio | boolean | false |
| className | string | — |
| children | React.ReactNode | — |
| onClick | (event: React.MouseEvent<HTMLSpanElement>) => void | — |
| onMouseEnter | (event: React.MouseEvent<HTMLSpanElement>) => void | — |
| onMouseLeave | (event: React.MouseEvent<HTMLSpanElement>) => void | — |
| id | string | — |
| title | string | — |
| style | React.CSSProperties | — |
| ...props | React.ComponentPropsWithoutRef<"span"> | — |
savd