We are live on DevHunt: tool of the week contest

check it out

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

PropTypeDefault
valuenumber-
maxnumber100
sizenumber200
labelstring-
colorstring-