Arc Gauge

Stable

Precision SVG telemetry gauge with radial tick marks, neon arc glow, dynamic auto threshold coloring, and cockpit sweep angles.

Installation

$pnpm add @siberui/react

Import

tsx
import { ArcGauge } from '@siberui/react';

Basic Usage & 240° Cockpit Telemetry

Standard 240° cockpit radial dial with tick marks, glow filter, and numerical telemetry readout.

78%
0100
CORE COMPUTE LOAD
tsx
<ArcGauge
  value={78}
  min={0}
  max={100}
  unit="%"
  label="CORE COMPUTE LOAD"
  color="cyan"
  glow
  showTicks
/>

Arc Sweep Angles (180°, 240°, 270°)

The angle prop configures the dial sweep: 180 (Semi-circle), 240 (Standard Cockpit), or 270 (Deep Arch).

60
0100
180° SEMI-ARC
75
0100
240° COCKPIT
90
0100
270° DEEP ARCH
tsx
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
  <div className="flex justify-center p-4 bg-[#050914] rounded-xl border border-white/[0.06]">
    <ArcGauge value={60} angle={180} label="180° SEMI-ARC" color="cyan" />
  </div>
  <div className="flex justify-center p-4 bg-[#050914] rounded-xl border border-white/[0.06]">
    <ArcGauge value={75} angle={240} label="240° COCKPIT" color="violet" />
  </div>
  <div className="flex justify-center p-4 bg-[#050914] rounded-xl border border-white/[0.06]">
    <ArcGauge value={90} angle={270} label="270° DEEP ARCH" color="emerald" />
  </div>
</div>

Auto Severity Threshold Color Transition

With color="auto" enabled, the arc color automatically transitions from Green (<60%) to Amber (60-85%) and Rose (>85%).

42
0100
NOMINAL (<60%)
74
0100
WARNING (60-85%)
94
0100
CRITICAL (>85%)
tsx
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
  <ArcGauge value={42} color="auto" label="NOMINAL (<60%)" />
  <ArcGauge value={74} color="auto" label="WARNING (60-85%)" />
  <ArcGauge value={94} color="auto" label="CRITICAL (>85%)" />
</div>

Dimension Scales (sm, md, lg, xl)

Select a gauge scale via size: "sm" | "md" | "lg" | "xl".

80
0100
SM (112px)
80
0100
MD (176px)
80
0100
LG (224px)
tsx
<div className="flex flex-wrap items-center justify-center gap-6 w-full">
  <ArcGauge size="sm" value={80} color="cyan" label="SM (112px)" />
  <ArcGauge size="md" value={80} color="violet" label="MD (176px)" />
  <ArcGauge size="lg" value={80} color="emerald" label="LG (224px)" />
</div>

Interactive Gauge Calibration

Drag the slider to test realtime dynamic SVG path transitions and automatic threshold shifts.

72°C
0100
REACTOR TEMPERATURE
SET LEVEL72°C
tsx
const [val, setVal] = useState(72);

<div className="space-y-6">
  <ArcGauge value={val} color="auto" unit="°C" label="REACTOR TEMPERATURE" glow />
  <Slider value={[val]} max={100} onValueChange={(v) => setVal(v[0])} />
</div>

Composite Cyber Telemetry Cluster

Composite mission telemetry dashboard card with multiple arc gauges.

ORBITAL PROPULSION TELEMETRY

ONLINE

Realtime plasma injector and magnetic field diagnostics.

84PSI
0100
CHAMBER PRESSURE
92%
0100
PLASMA OUTPUT
48A
0100
COIL CURRENT
tsx
<Card className="max-w-2xl mx-auto border-cyan-500/30 bg-[#070b14] shadow-2xl">
  <CardHeader className="pb-3 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-2">
        <Cpu className="h-4 w-4 text-cyan-400" />
        <CardTitle className="text-sm font-mono text-cyan-400">ORBITAL PROPULSION TELEMETRY</CardTitle>
      </div>
      <Badge variant="glass" dot dotColor="cyan">ONLINE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Realtime plasma injector and magnetic field diagnostics.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 grid grid-cols-1 sm:grid-cols-3 gap-4">
    <ArcGauge size="sm" value={84} unit="PSI" label="CHAMBER PRESSURE" color="cyan" />
    <ArcGauge size="sm" value={92} unit="%" label="PLASMA OUTPUT" color="rose" />
    <ArcGauge size="sm" value={48} unit="A" label="COIL CURRENT" color="emerald" />
  </CardContent>
</Card>

API Reference

PROPERTIES (10)← swipe to inspect →
PropertyDescriptionTypeDefault
value
Current numerical metric reading value.
number
0
min
Lower bound value limit.
number
0
max
Upper bound value limit.
number
100
unit
Unit of measurement string displayed beside value.
string
"%"
label
Descriptive title text displayed beneath the gauge value.
string
-
color
Active neon color accent or "auto" threshold.
"cyan" | "violet" | "emerald" | "green" | "amber" | "rose" | "auto"
"cyan"
angle
Arc sweep angle in degrees (180, 240, or 270).
180 | 240 | 270
240
size
Dimension scale tier.
"sm" | "md" | "lg" | "xl"
"md"
showTicks
Renders precision radial tick marks around the arc rim.
boolean
true
glow
Applies an SVG Gaussian blur glow filter to the stroke.
boolean
true

Accessibility

  • ARIA Meter Semantics: ArcGauge declares role="meter", aria-valuenow, aria-valuemin, and aria-valuemax.