# Health Stat Card

> The HealthStatCard component is a beautifully designed, interactive, and reusable UI card built using Shadcn UI and Framer Motion. It is perfect for displaying health, fitness, or performance-related statistics in a visually engaging way. The card features smooth animations, rounded “bubble-style” bars with 3D hover effects, and an optional tooltip that provides detailed information about each data point. You can configure the title, icon, stats, graph data, legend visibility, and even customize tooltip descriptions for each bar. This makes it ideal for use in dashboards, wellness apps, or analytics pages where users can easily visualize and interpret progress trends at a glance.

- Author: [ruhith](https://21st.dev/@ruhith369)
- License: unknown
- npm dependencies: lucide-react, framer-motion
- Live preview: https://21st.dev/@ruhith369/components/health-stat-card

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruhith369/health-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