Components
Ruler
Measurement-style ticks with gradient sweep fill, optional value labels, and numeric readout.
Ruler
Measurement-style progress bar — minor / medium / major tick classification with a clip-path gradient sweep (destructive → yellow → teal-cyan). Built on Radix Progress. Use for granular values where the tick density itself communicates precision.
Preview
Loading preview...
Installation
Terminal
$npx shadcn@latest add @vandoko/rulerUsage
import { Ruler } from "@/components/ruler";
export default function Page() {
return <Ruler value={42} ticks={101} majorEvery={10} showLabels showValue />;
}Custom Label Formatter
<Ruler
value={6.5}
max={10}
ticks={41}
majorEvery={10}
labelFormatter={(v) => v.toFixed(0)}
showLabels
/>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
value | number | — | Current value (required) |
max | number | 100 | Max value |
ticks | number | 101 | Total tick count (≥ 2) |
majorEvery | number | 10 | Index interval for major ticks (80% height) |
mediumEvery | number | 5 | Index interval for medium ticks (45% height) |
showLabels | boolean | false | Render a label row under major ticks |
labelFormatter | (value, index) => string | — | Format the label text |
showValue | boolean | false | Show 0 / value / max readout |
fillClassName | string | — | Extra classes on the gradient fill |
tickClassName / majorTickClassName / mediumTickClassName | string | — | Per-kind tick overrides |
Features
- Three-level tick hierarchy — Minor (20%), medium (45%), major (80%) heights
- Gradient sweep fill — Clip-pathed oklch gradient that reveals with progress
- Optional label row — Numeric labels under major ticks only
- Radix Progress semantics — Accessible by default
- Token-driven —
var(--foreground),var(--muted-foreground),var(--card),var(--border)
Lineage
| Property | Value |
|---|---|
| Source | @vandoko/ruler |
| Curated | 2026-04-21 |
| License | MIT |
| Dependencies | radix-ui |