gauge-demo

PreviousNext
Docs
diceuiexample

Preview

Loading preview…
examples/gauge-demo.tsx
import {
  Gauge,
  GaugeIndicator,
  GaugeLabel,
  GaugeRange,
  GaugeTrack,
  GaugeValueText,
} from "@/registry/default/ui/gauge";

export default function GaugeDemo() {
  return (
    <Gauge value={85} size={180} thickness={12}>
      <GaugeIndicator>
        <GaugeTrack />
        <GaugeRange />
      </GaugeIndicator>
      <GaugeValueText />
      <GaugeLabel className="sr-only">Performance</GaugeLabel>
    </Gauge>
  );
}

Installation

npx shadcn@latest add @diceui/gauge-demo

Usage

import { GaugeDemo } from "@/components/gauge-demo"
<GaugeDemo />