Gauge

Component 212

About

Gauge, Speed, Meter

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gauge to your project and fits it to your theme.

Code

How Gauge is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Gauge } from "@/components/ui/gauge-1";

export default function DemoOne() {
  return <Gauge
        value={81}
        size={200}
        gradient={true} 
        primary="success"
        tickMarks={true}
        label="Progress"
        transition={{ length: 1200, delay: 200 }}
      />;
}