text

Counter

Animated number counter that smoothly increments from one value to another with eased timing. Ideal for stats sections, dashboards, and metric displays.

v1.0.0react >=18next >=14tailwind >=4

textcounternumberstatsmetricsanimated

Preview

Loading preview...

Props

Prop	Type	Default	Description
`from`	`number`	`0`	Starting number
`to*`	`number`	`—`	Target number to count to
`duration`	`number`	`2000`	Animation duration in milliseconds
`decimals`	`number`	`0`	Number of decimal places to display
`separator`	`string`	`,`	Thousands separator character
`prefix`	`string`		Text prepended to the number (e.g., '$')
`suffix`	`string`		Text appended to the number (e.g., '%')
`triggerOnView`	`boolean`	`true`	Start counting when element enters viewport
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Layout

Display: inline

Responsive: No

Renders as an inline span with tabular-nums for stable digit widths. Place inside headings, stat cards, or grid cells.

Examples

Revenue counter

<Counter to={1250000} prefix="$" className="text-5xl font-bold" />

Percentage with decimals

<Counter to={99.9} decimals={1} suffix="%" className="text-4xl font-semibold" />

Stats row

<div className="flex gap-16">
  <div>
    <Counter to={50000} suffix="+" className="text-5xl font-bold" />
    <p className="text-neutral-400">Users</p>
  </div>
  <div>
    <Counter to={12} suffix="M" prefix="$" className="text-5xl font-bold" />
    <p className="text-neutral-400">Revenue</p>
  </div>
  <div>
    <Counter to={99.9} decimals={1} suffix="%" className="text-5xl font-bold" />
    <p className="text-neutral-400">Uptime</p>
  </div>
</div>

Custom duration and range

<Counter from={100} to={500} duration={3000} className="text-6xl font-black" />

AI Usage Hint

Use Counter for stats sections — revenue numbers, user counts, metrics. Set 'from' and 'to' for the range. Add 'prefix' ($) or 'suffix' (%) for formatted display. Use decimals for precise values. Place multiple Counters in a flex/grid row for a stats bar. Triggers on viewport entry by default.

Works Well With

FadeUpGradientText