# Animated number

> A number that springs to its new value instead of jumping.

Component · Free · https://lodeui.com/components/animated-number

## When to use

- Totals and KPIs that change in response to input, like a price as seats change.

## When not to use

- Values read precisely while changing quickly, like timers.
- When each digit should roll on its own: use the number ticker.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/animated-number.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { AnimatedNumber } from "@/components/ui/animated-number";

export function Total({ amount }: { amount: number }) {
  return <AnimatedNumber value={amount} format={(n) => `$${Math.round(n).toLocaleString("en-US")}`} className="text-3xl font-semibold" />;
}
```

## API reference

### AnimatedNumber

Springs from the previous value to the new one, formatting every frame.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `number` | – | Target value. |
| format | `(n: number) => string` | `en-US integer` | Runs every frame, so keep it cheap. |
| stiffness / damping | `number` | `140 / 24` | Spring tuning. |

## Accessibility

- Screen readers get the settled value from a visually hidden span; the animating text is aria-hidden.

## Motion

- A spring drives the value; tabular numerals stop the width from jittering.

## Responsive behavior

- Inline text; inherits size from its parent.

## Performance

- Updates bypass React rendering: the motion value writes text directly.

## Notes for AI

- Round inside format; the spring passes fractional values.

## Related

- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.
- [Donut chart](https://lodeui.com/components/donut-chart) — Proportions as arcs that morph when the data changes.