# Breakdown Stat Card – KPI Card that Splits a Number into Animated Segments

> Breakdown Stat Card for React and Tailwind CSS (shadcn/ui): a KPI tile whose big number opens like a drawer into its segments. The bar grows from the left, amounts roll up from zero, and hovering or focusing a segment rolls the headline value to its amount. It is built to show what a metric is made of without leaving the dashboard. Shares always sum to 100; expanded state and highlighted segment are controlled or uncontrolled. Roving-tabindex keyboard, polite announcements, light and dark, instant reduced motion. Use it for revenue, users, traffic or cost tiles. The included demo scripts two Alder tiles and makes no requests. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Stat, KPI, Dashboard, Card, Analytics
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/breakdown-stat-card

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/breakdown-stat-card?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/stat.md