Ring gauge
Circular score ring with status tone and big centered number.
Default
78
Performance
Animated
67
Fair
0Custom: 67100
Dashboard Grid
System health
Last updated just now
99
Uptime
Great
61
Latency
Needs work
8
Error rate
Poor
88
Throughput
Good
Score Tone
Default thresholds (<50 danger, <90 warning)
22
48
61
85
96
Strict thresholds (<70 danger, <95 warning)
22
48
61
85
96
Sizes
82
Score
82
Score
82
Score
82
Score
82
Score
Thickness
74
Thin
74
Default
74
Thick
74
Bold
Tones
32
Danger
67
Warning
91
Success
55
Info
50
Neutral
Installation
npx shadcn@latest add @byronwade/gaugeProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | 0–100 score. |
| label | string | — | Caption under the number. |
| tone | StatusTone | — | Override the auto tone. |
| size | number | 160 | Diameter in px. |
| thickness | number | 10 | Ring stroke width. |