# Count Animation

> The count animation component is designed to create a captivating user experience by animating numerical values as they increase or decrease. This effect draws the user's attention to important data, making the information more dynamic and engaging. Whether it's displaying statistics, financial figures, or progress counters, the smooth animation of numbers adds a sense of liveliness and interactivity to your interface. This example was created using Tailwind CSS and Framer Motion.

- Author: [Shadcn UI Kit](https://21st.dev/@bundui)
- Library: [Bundui](https://21st.dev/@bundui/library/bundui)
- License: mit
- Tags: Counter
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@bundui/components/count-animation

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/bundui/count-animation?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/counter.md