Gauge

Circular or bar gauge for progress/performance metrics. Supports thresholds for color zones.

Preview

Usage

import { Gauge } from '@ramtt/ui'

<Gauge value={75} max={100} label="Compliance" unit="%" />
<Gauge value={285} max={400} variant="bar" label="FTP" unit="W" />

Props

PropTypeDefaultDescription
value*numberCurrent value
max*numberMaximum value
labelstringLabel text
unitstringUnit suffix
size'sm' | 'md' | 'lg''md'Gauge size
variant'ring' | 'bar''ring'Visual style
color'default' | 'positive' | 'negative' | 'warning' | string'default'Fill color