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

PROP	TYPE	DEFAULT	DESCRIPTION
value	number	0	Progress value 0–100. Clamped to range.
variant	DEFAULT \| ACTIVE \| WARNING \| CRITICAL	DEFAULT	Controls the arc color and center value glow.
size	number	120	Diameter of the ring in pixels.
strokeWidth	number	6	Width of the SVG stroke in pixels.
label	string	undefined	Small uppercase label shown below the value in the center.
showValue	boolean	true	Show the numeric percentage in the center.
className	string	—	Additional classes merged via cn().