ScoreRing
score-ringDisplays a numeric score and grade inside a color-coded radial gauge.
Usage
Basic usage
value drive ring progress and center number, the default score is 100, and the A-F level word is displayed.
<ScoreRing value={82} label="Quality Points" />Level belt
The default A-F grade is automatically selected according to the score: A excellent / B good / C passing / F failing.
<>
<ScoreRing value={95} label="Quality Points" />
<ScoreRing value={82} label="Quality Points" />
<ScoreRing value={68} label="Quality Points" />
<ScoreRing value={42} label="Quality Points" />
</>Dimensions and Ring Width
size controls the diameter, thickness controls the ring width; for small sizes, showGrade={false} only leaves numbers.
<>
<ScoreRing value={88} size={48} thickness={5} showGrade={false} />
<ScoreRing value={88} size={96} thickness={8} label="Quality Points" />
<ScoreRing value={88} size={128} thickness={12} label="Quality Score" />
</>When to use
Use ScoreRing to present a quality, health, or rating score as a circular gauge with automatic A-F grade coloring. Use [Meter] or [Progress] for linear progress and capacity, or Sparkline for trends. Its SVG dasharray rendering is compatible with React Server Components.
Import
import { ScoreRing, resolveGrade, DEFAULT_GRADES } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| value* | number | — | Current score. |
| max | number | 100 | Maximum score. |
| grades | Grade[] | — | Grade bands; omission uses DEFAULT_GRADES for A-F. |
| size | number | 96 | Diameter in pixels. |
| thickness | number | 8 | Ring thickness in pixels. |
| showGrade | boolean | true | Shows the grade letter. |
| className | string | — | Custom class name. |
Slots
| Slot | Type | Description |
|---|---|---|
| label | ReactNode | Secondary center label, such as "Quality score". |
Pitfalls
resolveGrade(value, max, grades) determines the grade color. Pass grades to replace the default A-F system with your own rating model.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · Badge · Dot
Playground
<ScoreRing value={82} size={96} thickness={8} label="Quality Points" />