Stat Card

Stable

Tactical statistical metric card featuring system index tags ([SYS.METRIC_01]), trend delta chips (+24.8% ▲), and integrated micro activity sparklines.

Installation

$pnpm add @siberui/react

Import

tsx

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

Tactical HUD Metric Telemetry

High-contrast statistical metric card displaying system index tags, oversized numerical data readouts, and corner hardware brackets.

[SYS.METRIC_01]

REALTIME THROUGHPUT

14.2 GB/s

▲+28.4%

vs previous cycle

tsx

<div className="max-w-sm w-full">
  <StatCard
    indexTag="[SYS.METRIC_01]"
    label="REALTIME THROUGHPUT"
    value="14.2 GB/s"
    trend={{ value: '+28.4%', direction: 'up', label: 'vs previous cycle' }}
    icon={<Zap className="w-4 h-4" />}
    signal="cyan"
    cornerTicks
  />
</div>

Trend Deltas & Comparison Badges

The trend prop renders positive (up), negative (down), or neutral telemetry deltas.

[NODE_AUTH]

SUCCESSFUL AUTH

99.98%

▲+0.12%

nominal

[LATENCY_SPIKE]

EGRESS LAG

142 ms

▼+42ms

congestion detected

tsx

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full max-w-2xl">
  <StatCard
    indexTag="[NODE_AUTH]"
    label="SUCCESSFUL AUTH"
    value="99.98%"
    trend={{ value: '+0.12%', direction: 'up', label: 'nominal' }}
    icon={<ShieldCheck className="w-4 h-4" />}
    signal="emerald"
  />

  <StatCard
    indexTag="[LATENCY_SPIKE]"
    label="EGRESS LAG"
    value="142 ms"
    trend={{ value: '+42ms', direction: 'down', label: 'congestion detected' }}
    icon={<Activity className="w-4 h-4" />}
    signal="rose"
  />
</div>

Integrated Micro Activity Gauges

Supplying an activity array displays a 7-step micro activity sparkline along the bottom edge of the card.

[CORE_BUFFER]

ORBITAL PACKET FLOW

8.4M PKT/s

Dynamic packet routing active

tsx

<div className="max-w-sm w-full">
  <StatCard
    indexTag="[CORE_BUFFER]"
    label="ORBITAL PACKET FLOW"
    value="8.4M PKT/s"
    subtext="Dynamic packet routing active"
    activity={[30, 45, 60, 40, 80, 95, 70]}
    icon={<Globe className="w-4 h-4" />}
    signal="cyan"
    cornerTicks
  />
</div>

Signal Accents (Cyan, Violet, Emerald, Amber, Rose)

The signal prop selects the numerical metric and icon highlight color.

QUANTUM OPS

1.2PFLOPS

LATTICE BYTES

128GB

ENCLAVE INTEGRITY

100%

ZERO-DAY ISOLATION

14VEC

tsx

<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 w-full">
  <StatCard label="QUANTUM OPS" value="1.2" unit="PFLOPS" signal="cyan" icon={<Zap className="w-4 h-4" />} />
  <StatCard label="LATTICE BYTES" value="128" unit="GB" signal="violet" icon={<Database className="w-4 h-4" />} />
  <StatCard label="ENCLAVE INTEGRITY" value="100%" signal="emerald" icon={<ShieldCheck className="w-4 h-4" />} />
  <StatCard label="ZERO-DAY ISOLATION" value="14" unit="VEC" signal="amber" icon={<Lock className="w-4 h-4" />} />
</div>

API Reference

PROPERTIES (9)← swipe to inspect →

Property	Description	Type	Default
label	Telemetry metric label text.	string	-
value	Oversized numerical or text telemetry reading value.	string \| number	-
unit	Measurement unit symbol (e.g. "GB/s", "PFlops", "ms").	string	-
subtext	Additional contextual subtext displayed below value.	string	-
indexTag	Top-left system telemetry index tag (e.g. "[SYS.01]").	string	-
trend	Telemetry trend delta object ({ value, direction, label }).	StatCardTrend	-
activity	Recent activity cycle values array (0 - 100).	number[]	-
signal	Accent highlight color.	"cyan" \| "violet" \| "emerald" \| "amber" \| "rose"	"cyan"
cornerTicks	Renders tactical corner bracket marks.	boolean	false

Accessibility

High Contrast: Numerical readings and labels use high contrast monospace fonts for maximum clarity.