SYS:ONLINE● ACTIVE
THEME
GITHUBv0.1.0

PROGRESS RING

SVG circular gauge with a phosphor glow arc. Complements the linear Progress bar. Use for radar readouts, system health gauges, and capacity displays.

PREVIEW

87%REACTOR
61%SHIELDS
23%HULL
50%FUEL

INSTALLATION

BASH
npx shadcn@latest add @scificn/progress-ring

USAGE

TSX
import { ProgressRing } from '@/ui/progress-ring'

export function SystemGauges() {
  return (
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap' }}>
      <ProgressRing value={87} label="REACTOR" variant="ACTIVE"   size={120} />
      <ProgressRing value={61} label="SHIELDS" variant="WARNING"  size={120} />
      <ProgressRing value={23} label="HULL"    variant="CRITICAL" size={120} />
    </div>
  )
}

VARIANTS

75%
variant="ACTIVE"
75%
variant="WARNING"
75%
variant="CRITICAL"
75%
variant="DEFAULT"

SIZES

72%
size=64
72%
size=90
72%
size=120
72%
size=160

PROPS

PROPTYPEDEFAULTDESCRIPTION
valuenumber0Progress value 0–100. Clamped to range.
variantDEFAULT | ACTIVE | WARNING | CRITICALDEFAULTControls the arc color and center value glow.
sizenumber120Diameter of the ring in pixels.
strokeWidthnumber6Width of the SVG stroke in pixels.
labelstringundefinedSmall uppercase label shown below the value in the center.
showValuebooleantrueShow the numeric percentage in the center.
classNamestringAdditional classes merged via cn().