GaugeFreev1.0.0
A value in a known range, read as a dial of hairline ticks: ticks light to the value in the tone of its band, a longer tick marks where each band begins, and the band's word sits under the number.
Base UI
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-gauge.jsonRadix
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-gauge.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
Install by hand
- 1. No extra packages: React and Tailwind CSS v4 are enough.
- 2. Copy the files to these paths (Source below, or save them all as a .zip)
- components/ui/lumen/controls/gauge.tsx
- 3. Paste styles.css into your global CSS, after @import "tailwindcss";
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Thresholds
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { Gauge } from "@/components/ui/lumen/controls/gauge";
export function CpuGauge({ cpu }: { cpu: number }) {
return (
<Gauge
label="CPU"
value={cpu}
unit="%"
thresholds={[
{ at: 0, tone: "good", label: "Healthy" },
{ at: 65, tone: "warn", label: "Busy" },
{ at: 85, tone: "bad", label: "Saturated" },
]}
/>
);
}Props
value–numberThe reading. The dial clamps it to min–max; the number shows it as given.
min / max0 / 100numberThe range.
label–stringWhat is measured: the accessible name, and the caption when no band has a word.
thresholds[]{ at, tone: "neutral" | "good" | "warn" | "bad", label? }[]Where bands begin. Below the first, the dial is neutral ink.
unit–stringAfter the number, e.g. "%" or "ms".
format / locale–(v) => string / stringFormats the number. Default: the locale's number, up to one decimal.
Show all 8 propsShow fewer
caption–ReactNodeReplaces the word under the number.
ticks / size41 / 176numberHow many ticks, and the width in px.
Source
components/ui/lumen/controls/gauge.tsx
