Speed Gauge

beta

A picture of speed: a dial with a lit arc, ticks around its edge, and a needle near the top of its range.

Preview

success tone, lower value

no dots, narrow container

1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.
```
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
```
2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```
3. Add the illustration. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.
```
npx shadcn@latest add @txbrendan/speed-gauge
```

A feature section about speed, like small parts that keep pages fast.
Put it in a Feature Grid item's `illustration`, or a Bento Card's `preview`.
Set `value` from 0 to 1 to move the needle. The default sits near the top.
Write `label` as one sentence that says what the picture shows. Screen readers hear it in place of the drawing.

A real reading people check, like a score or a load. Use Ring Progress or a chart.
A small icon beside text. Use an icon from lucide-react.

value
How far the needle points, from 0 to 1. Values outside are held to that range.
number · default 0.78
label
What the picture says, read out in its place.
string · default a sentence about the dial
tone
The color of the lit arc and the needle's glow.
"neutral" | "brand" | "danger" | "success" | "warning" · default "neutral"
pattern
A field of dots behind the gauge.
boolean · default true
className
Extra classes on the root.
string

Prop	Type	Default	What it does
value	number	0.78	How far the needle points, from 0 to 1. Values outside are held to that range.
label	string	a sentence about the dial	What the picture says, read out in its place.
tone	"neutral" \| "brand" \| "danger" \| "success" \| "warning"	"neutral"	The color of the lit arc and the needle's glow.
pattern	boolean	true	A field of dots behind the gauge.
className	string	-	Extra classes on the root.

The root is one image, named by `label`. The drawing is hidden from screen readers.
Nothing inside takes focus.
On hover the glow at the needle's tip fades up. It is a fade, so it stays with reduced motion, and it stops when motion is off.

<SpeedGauge />

<SpeedGauge tone="success" label="Every part stays small, so pages load fast." />