AnimatedCounter
A number counter that smoothly animates from its previous value to a new target value. Perfect for dashboards, stats, and KPIs.
Interactive Demo
Click the button to animate the counters to new random values.
Revenue
Total Users
Conversion
Usage
import { AnimatedCounter } from "@mantleui/react/motion";
<AnimatedCounter value={5234} prefix="$" duration={1.5} /><AnimatedCounter value={1234567} suffix=" users" /><AnimatedCounter value={98.5} decimals={1} suffix="%" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | The target number to animate to. |
duration | number | 1.5 | Animation duration in seconds. |
decimals | number | 0 | Number of decimal places to display. |
prefix | string | — | Optional prefix rendered before the number (e.g. "$"). |
suffix | string | — | Optional suffix rendered after the number (e.g. "+"). |
valuenumberThe target number to animate to.
duration1.5numberAnimation duration in seconds.
decimals0numberNumber of decimal places to display.
prefixstringOptional prefix rendered before the number (e.g. "$").
suffixstringOptional suffix rendered after the number (e.g. "+").