Counter Number

PreviousNext

An animated numeric display component with smooth counting, formatting, sizes, and semantic color variants.

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>