Tick Gauge
A half-dial of ticks that light up to a value, with a longer lead tick. Drag the arc or use the keys.
Overview
Ticks fill from left to right up to the value, and the lead tick is drawn longer so the reading has a clear edge without a needle.
It is a real slider: drag along the arc, or use the arrow, Page and Home/End keys. Leave it uncontrolled for an input, or pass value for a read-only style meter.
When to use
- Dashboards that show one reading against a fixed range: load, battery, quota.
- Settings where a dial is easier to read than a slider, like a thermostat.
When not to use
- Comparing several values: use bars.
- Values with no meaningful maximum.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/tick-gauge.jsonnpx shadcn@latest add https://sundaeui.dev/r/tick-gauge.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/tick-gauge.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/tick-gauge.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy tick-gauge.tsx and tick-gauge.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { TickGauge } from '@/components/sundae/tick-gauge'
<TickGauge label="CPU load" defaultValue={64} caption="8 cores" />Props
| Prop | Type | Default |
|---|---|---|
label*Visible label and accessible name. | string | — |
value / defaultValueControlled or starting value. | number | 50 |
onValueChangeCalled while dragging or on key presses. | (value: number) => void | — |
min / max / stepRange and step. | number | 0 / 100 / 1 |
unitShown after the number. | string | '%' |
ticksTicks on the arc. | number | 41 |
captionSmall line under the dial. | string | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- The dial is role="slider" with aria-valuenow, min, max and a readable aria-valuetext.
- Arrow, Page and Home/End keys follow the slider pattern; a visible focus ring sits around the dial.
- Reduced motion removes the tick colour transition.
Customization
- --fg and --dim set the lit and unlit tick colours.
- Use 21 ticks for a chunkier look, 61 for a fine one.
Keyboard
- ← / → or ↑ / ↓
- Step the value
- Page Up / Down
- Jump a tenth of the range
- Home / End
- Minimum or maximum
FAQ
- Can it be read-only?
- Pass value without onValueChange and it still renders as a meter; add aria-readonly on the dial if you do.
- Why ticks instead of an arc?
- Ticks stay crisp at any size and read as a scale, so a reading is easier to estimate at a glance.
- Is Tick Gauge free?
- Tick Gauge is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Tick Gauge?
- Run npx shadcn@latest add https://sundaeui.dev/r/tick-gauge.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Tick Gauge support keyboard and screen readers?
- The dial is role="slider" with aria-valuenow, min, max and a readable aria-valuetext. Arrow, Page and Home/End keys follow the slider pattern; a visible focus ring sits around the dial.
- Does Tick Gauge respect reduced motion?
- Reduced motion removes the tick colour transition.
More like this
All data →Stacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined - Pro
Donut Breakdown
Data · Refined - Pro
Range Line Chart
Data · Refined Weather Forecast
Data · Refined- Pro
Price History
Data · Refined