Gauge
Use Gauge for a value within a known range. Configure ranges, ticks, and labels or compose its parts directly.
Source
LLM docs
Package
Examples
3
Properties
47
Basics
Adjust a measured value and watch the needle move across the scale.
Loading demo…
import { useState } from 'react';
import { Block, Button, Gauge, Row } from '@plocks/ui';
export function Demo() {
const [value, setValue] = useState(65);
return (
<Block align="center" gap="md">
<Gauge
value={value}
size={220}
aria-label="Completion"
ticks={{ major: 5 }}
labels={{ show: true, formatter: (current) => `${current}%` }}
/>
<Row gap="sm">
<Button variant="outline" onPress={() => setValue(Math.max(0, value - 10))}>
-10%
</Button>
<Button onPress={() => setValue(Math.min(100, value + 10))}>+10%</Button>
</Row>
</Block>
);
}Colored ranges
Color the scale by operating range and include the current band in the spoken value.
Loading demo…
import { Gauge } from '@plocks/ui';
const ranges = [
{ from: 0, to: 40, color: '#3b82f6', label: 'Low' },
{ from: 40, to: 75, color: '#f59e0b', label: 'Elevated' },
{ from: 75, to: 100, color: '#ef4444', label: 'High' },
];
export function Demo() {
return (
<Gauge
value={68}
size={220}
aria-label="System load"
ranges={ranges}
ticks={{ major: 5, minor: 4 }}
labels={{ show: true }}
/>
);
}Compound parts
Compose the track, range, ticks, needle, and center to control each part directly.
Loading demo…
import { Gauge } from '@plocks/ui';
export function Demo() {
return (
<Gauge value={72} size={220} aria-label="Battery charge">
<Gauge.Track />
<Gauge.Range from={0} to={25} color="#ef4444" />
<Gauge.Range from={25} to={100} color="#22c55e" />
<Gauge.Ticks major={5} />
<Gauge.Labels formatter={(value) => `${value}%`} />
<Gauge.Needle config={{ shape: 'arrow' }} />
<Gauge.Center />
</Gauge>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources