Stat Ring
A circular progress ring component with gradient strokes, mount animations, glow effects, and optional end-cap markers. SVG-based with customizable size, thickness, and colors.
Installation
$ npx shadcn@latest add @orecus/stat-ringDependencies:
motion
Registry:
skeleton@orecus/color-utils@orecus/card@orecus/animation
Component
Ring progress indicators in different sizes.
60%
Small
75%
Medium
90%
Large
2,847
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 ring |
color | ThemeColor | 'primary' | Ring color |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
thickness | number | — | Custom stroke width (overrides size default) |
showValue | boolean | true | Show value in center |
formatValue | (value: number, max: number) => string | — | Custom format function for displayed value |
description | ReactNode | — | Additional content below the ring |
loading | boolean | false | Shows skeleton loading state |
cardProps | CardProps | — | Props to pass to the Card wrapper |
className | string | — | Additional CSS classes |
variant | 'default' | 'gradient' | 'default' | Ring style variant - 'gradient' uses SVG gradient for the stroke |
animated | boolean | false | Animate the ring fill on mount |
glow | boolean | false | Add colored glow/shadow effect behind the ring |
trackVariant | 'subtle' | 'dashed' | 'subtle' | Background track styling |
icon | ReactNode | — | Icon to show in center instead of value |
showMarker | boolean | false | Show a marker dot at the ring progress tip |
markerGlow | boolean | false | Add animated pulse glow to the marker |
thresholds | { value: number; color: ThemeColor; label?: string }[] | — | Threshold breakpoints that change ring color based on value ranges |