Gauge
A dial of 61 notches with a needle that has mass: it sweeps up from the minimum on a loose spring, overshoots and settles, lighting notches as it passes and flashing the one it just crossed.
$149 once · every Pro piece
New values continue from wherever the needle is, and the readout rolls on per-digit mass. Options: needle styles (a stub at the rim, a line floating clear of the readout, a tapered blade, a triangle outside the rim, or none); an inner ruler whose ticks and labels brighten as the needle passes; a limit past which the notches burn in the accent over a hatched zone and the number heats; a conic wedge that brightens toward the value; loading and empty states. Interactive gauges are sliders you drag by angle or step with the keys.
Install
npx shadcn@latest add @obsyde/gaugeNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Gauge } from '@/components/obsyde/ember/gauge/Gauge';
export function Example() {
return (
<Gauge value={62} />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/gauge/Gauge.tsxcomponentember/gauge/gauge.cssstylesember/gauge/GaugeDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/size.tssharedember/viz-kit/scale.tssharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/motion.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
valueValue | number | 62 |
minMin | number | 0 |
maxMax | number | 100 |
needleNeedle | 'stub' | 'line' | 'tapered' | 'triangle' | 'none' | 'stub' |
rulerRuler | boolean | false |
limitLimit (−1 off) | number | -1 |
fillFill | 'none' | 'conic' | 'none' |
unitUnit | string | '%' |
labelLabel | string | — |
interactiveInteractive | boolean | false |
sizeSize | number | 220 |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |