Skill Matrix

Stable

Tactical proficiency and telemetry power array featuring multi-step segmented LED bars, auto tactical rank badges ([MASTER], [SPECIALIST]), and categorized domain tags.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  SkillMatrix, 
  SkillItem 
} from '@siberui/react';

Segmented LED Power Array & Ranks

Renders discrete segmented LED power bars with automatic tactical rank calculation (showRank) based on mastery percentages.

Next.js 15 / React 19CORE

[MASTER]95%

Rust / WebAssemblySYSTEMS

[SPECIALIST]82%

PostgreSQL / RedisDATA

[ADEPT]70%

Post-Quantum LatticeSECURITY

[SPECIALIST]88%

tsx

<SkillMatrix cols={2}>
  <SkillItem
    name="Next.js 15 / React 19"
    level={95}
    category="CORE"
    icon={<Layout className="w-3.5 h-3.5" />}
    signal="cyan"
  />
  <SkillItem
    name="Rust / WebAssembly"
    level={82}
    category="SYSTEMS"
    icon={<Cpu className="w-3.5 h-3.5" />}
    signal="violet"
  />
  <SkillItem
    name="PostgreSQL / Redis"
    level={70}
    category="DATA"
    icon={<Database className="w-3.5 h-3.5" />}
    signal="emerald"
  />
  <SkillItem
    name="Post-Quantum Lattice"
    level={88}
    category="SECURITY"
    icon={<Shield className="w-3.5 h-3.5" />}
    signal="amber"
  />
</SkillMatrix>

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

The signal prop selects the LED cell and text accent highlight color.

Cyan Laser Matrix

[MASTER]100%

Violet Psionic Node

[SPECIALIST]80%

Emerald Bio Sentinel

[ADEPT]65%

Rose Breach Vector

[MASTER]92%

tsx

<SkillMatrix cols={2}>
  <SkillItem name="Cyan Laser Matrix" level={100} signal="cyan" icon={<Zap className="w-3.5 h-3.5" />} />
  <SkillItem name="Violet Psionic Node" level={80} signal="violet" icon={<Terminal className="w-3.5 h-3.5" />} />
  <SkillItem name="Emerald Bio Sentinel" level={65} signal="emerald" icon={<Shield className="w-3.5 h-3.5" />} />
  <SkillItem name="Rose Breach Vector" level={92} signal="rose" icon={<Cpu className="w-3.5 h-3.5" />} />
</SkillMatrix>

High-Resolution Custom Segment Counts

Use segments to define high-resolution power arrays (e.g. 8, 12, 16, or 20 discrete energy cells).

Ultra Precision Array (20 Segments)

[SPECIALIST]85%

Standard Tactical Array (12 Segments)

[SPECIALIST]75%

tsx

<div className="space-y-3 w-full max-w-xl">
  <SkillItem name="Ultra Precision Array (20 Segments)" level={85} segments={20} signal="cyan" />
  <SkillItem name="Standard Tactical Array (12 Segments)" level={75} segments={12} signal="amber" />
</div>

API Reference

SkillItem Props

PROPERTIES (5)← swipe to inspect →

Property	Description	Type	Default
name	Skill or proficiency name.	string	-
level	Proficiency mastery value between 0 and 100.	number	-
signal	LED bar and text accent color.	"cyan" \| "violet" \| "emerald" \| "amber" \| "rose"	"cyan"
segments	Total number of discrete LED power segments.	number	12
showRank	Displays the tactical rank badge based on percentage.	boolean	true

Accessibility

Readable Text Fallbacks: Exact percentages and rank classifications are rendered in the DOM for screen reader discovery.