counter-number-default
0
import { CounterNumber } from "@/components/ui/texts/counter-number"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<CounterNumber value={1234} size="xl" />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/counter-number-default.json"counter-number-percentage
+0.0%
import { CounterNumber } from "@/components/ui/texts/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>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/counter-number-percentage.json"counter-number-currency
$0.00
import { CounterNumber } from "@/components/ui/texts/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>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/counter-number-currency.json"counter-number-decimal
0.000
import { CounterNumber } from "@/components/ui/texts/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>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/counter-number-decimal.json"counter-number-prefix
$0 USD
import { CounterNumber } from "@/components/ui/texts/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>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/counter-number-prefix.json"counter-number-seperator
0
import { CounterNumber } from "@/components/ui/texts/counter-number"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<CounterNumber value={1000000} size="xl" separator="." />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/counter-number-seperator.json"counter-number-custom
0.0%
import { CounterNumber } from "@/components/ui/texts/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>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/counter-number-custom.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/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>API Reference
CounterNumber
Animated number display with formatting options.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Required. Final value to animate to. |
startValue | number | 0 | Starting value before animation begins. |
duration | number | 1000 | Animation duration in milliseconds. |
decimalPlaces | number | 0 | Number of fractional digits to display. |
prefix | string | "" | String shown before the number. |
suffix | string | "" | String shown after the number. |
separator | string | "," | Thousands separator override (applied after locale formatting). |
currency | string (ISO 4217) | — | Formats number as currency (e.g., "USD", "INR"). |
locale | string | "en-US" | Locale code (BCP 47) for Intl.NumberFormat. |
size | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Visual size variant. |
color | "default" | "primary" | "secondary" | "success" | "warning" | "error" | "default" | Color/text variant. |
preserveAspectRatio | boolean | false | Uses monospaced digits (font-mono) to reduce layout shift. |
className | string | "" | Additional Tailwind/CSS classes applied to the <span>. |