# Delta Number Ticker – Rolling Number with Animated Change Chip and Previous Value

> Delta Number Ticker for React and Tailwind CSS (shadcn/ui): digits roll on every change while a chip with the absolute and percent change lifts off the number and settles beside it, and the old value lingers below as a ghost. It is built to show how much and which way a figure moved. Columns roll with a 20 ms stagger, new columns grow in for extra digits, and goodDirection paints a falling latency as good. Controlled previousValue or own memory, Intl formatting, polite announcements, reduced motion, light and dark. Use it for KPIs, prices, balances, latency and stock. The included demo plays a fixed storefront scenario and makes no requests. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Number, Counter, Animation, Dashboard, Stat
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/delta-number-ticker

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/delta-number-ticker?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/number.md