Gauge

A vessel of glass holding liquid light. The fill rises on a transform and carries a bright meniscus where it meets the surface.

Install

$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/gauge.json

Examples

Default

64%Reservoir

"use client";

import * as React from "react";

import { Gauge } from "@/components/ui/gauge";
import { Slider } from "@/components/ui/slider";

export function GaugeDemo() {
  const [value, setValue] = React.useState(64);

  return (
    <div className="flex flex-col items-center gap-8">
      <Gauge value={value} label="Reservoir" className="size-36" />
      <Slider
        value={[value]}
        onValueChange={([next]) => setValue(next)}
        aria-label="Set reservoir level"
        className="w-56"
      />
    </div>
  );
}

API

<Gauge />

Prop	Type	Default	Description
value	number	—	Current reading.
min	number	0	Lower bound.
max	number	100	Upper bound.
label	string	—	Accessible name (required).
format	(value, pct) => ReactNode	percentage	Custom readout.