# Motion Gauge

Animated radial gauge that sweeps to a value with thresholds.

- id: `motion-gauge`
- Page: https://agentic-ui-kit.com/components/motion-gauge
- Live preview: https://agentic-ui-kit.com/live/component/motion-gauge?piece=motion-gauge

## Install

```bash
agentic-ui add motion-gauge
npx shadcn@4.17.0 add @agentic-ui/motion-gauge
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** radial-gauge, spring-sweep-on-enter, retarget-on-value-change, threshold-bands, band-colored-arc, meter-role, final-value-in-server-html, three-sizes, reduced-motion-fallback
- **Intents:** track-status, monitor-live
- **Suits domains:** operations, analytics, devops-status, saas, ai-agents
- **Interaction:** motion-preference, value-change
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** animated radial gauge that sweeps to a value with thresholds, cpu or memory usage dial with healthy elevated critical bands, uptime or error budget gauge with an accessible meter role, speedometer style progress gauge that animates when scrolled into view
- **Avoid when:** A static KPI dial with target marker and delta is needed (use chart-gauge-kpi), Many gauges updating several times per second, The exact number must be compared across items, where a table or bars read better
- **Preserve when adapting:** meter-role-final-value, spring-sweep-in-view, band-colored-arc
- **Replace when adapting:** value-and-range, bands, label-and-unit, size
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, react
- **Motion:** profile subtle, library motion, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion