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>