Threat Indicator

Stable

Circular SVG threat telemetry meters featuring square stroke ends, embedded numerical readouts, and severity-driven color pulsing.

Installation

$pnpm add @siberui/react

Import

tsx

import { ThreatIndicator } from '@siberui/react';

Basic Usage & Circular SVG Meter

Displays a 360-degree SVG radial gauge with central percentage readouts and uppercase subtext labels.

24%DEFCON 5

tsx

<div className="flex items-center justify-center p-8">
  <ThreatIndicator level="low" value={24} label="DEFCON 5" size="md" />
</div>

Threat Severity Spectrum (Low, Medium, High, Critical)

Color shifts seamlessly from nominal low (Cyan) to caution medium (Amber), threat high (Rose), and critical (Pulsing Rose).

18%SEC_LEVEL_1

LOW (CYAN)

48%SEC_LEVEL_2

MEDIUM (AMBER)

82%SEC_LEVEL_3

HIGH (ROSE)

98%SEC_LEVEL_4

CRITICAL (PULSE)

tsx

<div className="grid grid-cols-2 md:grid-cols-4 gap-6 w-full">
  <div className="flex flex-col items-center gap-3 p-6 rounded-xl bg-white/[0.02] border border-white/[0.06]">
    <ThreatIndicator level="low" value={18} label="SEC_LEVEL_1" size="md" />
    <span className="text-xs font-mono text-cyan-400">LOW (CYAN)</span>
  </div>

  <div className="flex flex-col items-center gap-3 p-6 rounded-xl bg-white/[0.02] border border-white/[0.06]">
    <ThreatIndicator level="medium" value={48} label="SEC_LEVEL_2" size="md" />
    <span className="text-xs font-mono text-amber-400">MEDIUM (AMBER)</span>
  </div>

  <div className="flex flex-col items-center gap-3 p-6 rounded-xl bg-white/[0.02] border border-white/[0.06]">
    <ThreatIndicator level="high" value={82} label="SEC_LEVEL_3" size="md" />
    <span className="text-xs font-mono text-rose-400">HIGH (ROSE)</span>
  </div>

  <div className="flex flex-col items-center gap-3 p-6 rounded-xl bg-white/[0.02] border border-white/[0.06]">
    <ThreatIndicator level="critical" value={98} label="SEC_LEVEL_4" size="md" />
    <span className="text-xs font-mono text-rose-500">CRITICAL (PULSE)</span>
  </div>
</div>

Scale & Scope Dimensions (sm, md, lg)

Scale dimensions across sm (64px), md (96px), and lg (128px).

35%SM

SM (64px)

60%MD

MD (96px)

85%LG

LG (128px)

tsx

<div className="flex items-center justify-center gap-8">
  <ThreatIndicator size="sm" level="low" value={35} label="SM" />
  <ThreatIndicator size="md" level="medium" value={60} label="MD" />
  <ThreatIndicator size="lg" level="high" value={85} label="LG" />
</div>

Interactive Gauge Calibration

Drag the range slider to observe real-time color transitions and animated stroke offsets.

78%INCURSION PROBABILITY

ADJUST SIMULATED LOAD78%

tsx

const [threatVal, setThreatVal] = React.useState(78);

<div className="flex flex-col items-center gap-6 max-w-sm w-full">
  <ThreatIndicator
    size="lg"
    value={threatVal}
    level={getComputedLevel(threatVal)}
    label="INCURSION PROBABILITY"
  />
  <Slider
    value={[threatVal]}
    onValueChange={(val) => setThreatVal(val[0])}
    max={100}
    min={0}
  />
</div>

Frosted Cyber-Glass Perimeter Threat Sensor

Composite acrylic sensor panel nested on circuit substrate backgrounds with active border sweeps.

OPTICAL PERIMETER SENSOR

MONITORED

14%NOMINAL

ZERO ACTIVE INTRUSIONS

Last anomalous frame detected 42 hours ago

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden flex flex-col items-center">
  <div className="relative z-10 space-y-6 flex flex-col items-center w-full">
    <div className="flex items-center justify-between w-full pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <ShieldAlert className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">OPTICAL PERIMETER SENSOR</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">MONITORED</Badge>
    </div>

    <ThreatIndicator level="low" value={14} label="NOMINAL" size="lg" />

    <div className="w-full text-center space-y-1">
      <span className="text-xs font-mono text-cyan-300">ZERO ACTIVE INTRUSIONS</span>
      <p className="text-[11px] text-slate-400 font-mono">Last anomalous frame detected 42 hours ago</p>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Threat Vector Analysis Console

Composite mission defense card with embedded threat gauges.

DEFENSE FIREWALL MATRIX

ELEVATED

Automated SYN flood packet filter telemetry.

84%PACKET DROPS

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">DEFENSE FIREWALL MATRIX</CardTitle>
      <Badge variant="destructive" size="sm">ELEVATED</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Automated SYN flood packet filter telemetry.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 flex flex-col items-center gap-6">
    <ThreatIndicator level="high" value={84} label="PACKET DROPS" size="lg" />

    <div className="flex w-full justify-between gap-3 pt-2">
      <Button variant="secondary" size="sm" className="w-1/2">FLUSH TABLE</Button>
      <Button variant="destructive" size="sm" className="w-1/2">ENGAGE SHIELD</Button>
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (4)← swipe to inspect →

Property	Description	Type	Default
value	Numerical percentage from 0 to 100.	number	-
level	Threat severity level governing stroke color and critical pulse animation.	"low" \| "medium" \| "high" \| "critical"	"low"
label	Uppercase subtext label displayed beneath the percentage readout.	string	-
size	Physical dimension of the circular meter.	"sm" \| "md" \| "lg"	"md"

Accessibility

ARIA Role Meter: ThreatIndicator uses role="meter" with aria-valuenow, aria-valuemin="0", and aria-valuemax="100".

Best Practices

Labels: Always provide a short uppercase label such as "SEVERITY" or "PACKET LOSS" to clarify the measured metric.