Stat Gauge
A semi-circular arc gauge with gradient strokes, range zones, mount animations, and glow effects. SVG-based with customizable size, thickness, and colors.
Installation
$ npx shadcn@latest add @orecus/stat-gaugeDependencies:
motion
Registry:
skeleton@orecus/color-utils@orecus/card@orecus/use-reduced-motion@orecus/use-animated-number@orecus/animation
Component
Semi-circular arc gauges in different sizes.
Small
Medium
Large
Active Users
Out of 5,000 capacity
System Health
All systems operational
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | — | Current value (0 to max) |
max | number | 100 | Maximum value |
label* | string | — | Label text below the gauge |
color | ThemeColor | 'primary' | Gauge color |
ranges | { value: number; color: ThemeColor; label?: string }[] | — | Background qualitative range zones sorted ascending. Auto-derives progress color. |
showValue | boolean | true | Show value in the gauge center |
formatValue | (value: number, max: number) => string | — | Custom format function for displayed value |
description | ReactNode | — | Additional description text |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
thickness | number | — | Custom stroke width (overrides size default) |
variant | 'default' | 'gradient' | 'default' | Gauge fill style |
animated | boolean | false | Animate gauge fill on mount |
glow | boolean | false | Glow effect on gauge arc |
animateValue | boolean | true | Number counting animation |
icon | ReactNode | — | Icon to show instead of value |
showMarker | boolean | false | Show marker dot at progress tip |
markerGlow | boolean | false | Add animated pulse glow to the marker |
loading | boolean | false | Shows skeleton loading state |
cardProps | CardProps | — | Props to pass to the Card wrapper |
className | string | — | Additional CSS classes |