Primitive · CLI
Animate Number
Pricing and stats counter — digits tween as numbers with easeOutSoft.
Preview
npx shadcn@latest add @atroui/animate-number$1,280
Digits tween as numbers — Soft settle, no scramble.
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/animate-numberSource lands in your repo. Installation · Registry
Usage
Use for pricing tiers and KPI stats. Pass
from for an enter count; omit it to only tween when value changes. Reduced motion jumps to the final formatted value.tsx
import { AnimateNumber } from "@/components/ui/animate-number"
<AnimateNumber value={1280} from={0} prefix="$" />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | Target number. |
| from | number | - | Start value on mount. Defaults to value (no enter tween). |
| duration | number | 0.7 | Tween duration in seconds (Soft settle). |
| format | Intl.NumberFormatOptions | (n) => string | - | Locale formatting or custom formatter. |
| locale | string | - | BCP 47 locale for Intl formatting. |
| prefix | string | - | String before the formatted number. |
| suffix | string | - | String after the formatted number. |
Animate Number