Radial Gauge
A sophisticated circular progress gauge with glow effects and data visualization.
Preview
Interactive Preview
75%Server Load
92%GPU Usage
Installation
Usage
tsx
import { RadialGauge } from "@/components/ui/radial-gauge"
export default function Demo() {
return (
<div className="flex gap-8">
<RadialGauge value={75} label="Server Load" color="#3b82f6" />
<RadialGauge value={92} label="Storage" color="#ef4444" />
</div>
)
}Dependencies
framer-motion
Props
| Prop | Type | Default |
|---|---|---|
| value | number | - |
| max | number | 100 |
| size | number | 200 |
| label | string | - |
| color | string | - |