# Health Stat Card

> The HealthStatCard component is a modern, reusable, and fully customizable Shadcn UI–based card designed for displaying health and performance metrics in an engaging, data-driven way. Built with Framer Motion for smooth, spring-based animations and Shadcn tooltips for contextual insights, it features bubble-style bars that animate in 3D on hover to make data visualization more interactive and appealing. Each bar can display a tooltip with a short description and value, making it perfect for dashboards that track metrics such as sleep quality, hydration, fitness, nutrition, or productivity. With flexible props for configuring icons, statistics, colors, legends, and animations, this component provides a clean, professional, and visually rich way to represent health-related data across any Next.js application.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/health-stat-card

## Install

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