A half-ring meter with a readable value and configurable bounds.
pnpm dlx shadcn@latest add @latheui/gaugePart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Gauge is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| value* (required) | number | — | Current reading, clamped to the bounds. |
| min / max | number | 0 / 100 | Meter bounds. |
| label* (required) | string | — | Visible and accessible meter name. |
| formatValue | (value: number) => string | — | Format reading and boundaries. |
Combine the control with your own layout. Semantic colors follow the active theme.
import * as React from "react"
import { Gauge } from "@/components/ui/gauge"
import { Slider } from "@/components/ui/slider"
export default function Demo(){const [value,setValue]=React.useState([72]);return <div className="flex w-full max-w-xs flex-col items-center gap-6"><Gauge value={value[0]} label="Capacity" formatValue={v=>v+"%"}/><Slider className="w-full" label="Adjust capacity" value={value} onValueChange={setValue}/></div>}