# Health Gauge

> 270 degree gauge where the zone owns the color, the arc, its end dot and the status word all take the hue of the band the value sits in, At risk, Caution or Healthy. The dots underneath switch between metrics, account health, fear and greed and liquidity in the demo, and the arc redraws to the new value. metrics and zones are both props, so the bands and their colors are yours. Light and dark via shadcn theme tokens, respects reduced motion. More dark, data-dense components at https://www.ssych.com/library?ref=21st.dev

- Author: [Savva Sicevs](https://21st.dev/@ssychui)
- Library: [ssych ui](https://21st.dev/@ssychui/library/ssicevs)
- License: mit
- Tags: Dashboard, Finance, Status, Gauge
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@ssychui/components/health-gauge

## Install

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