v2.1.0

@bene-npm/shield-ui

Security-themed React component library for dashboards, scanners, and threat visualization tools.

$ npm i @bene-npm/shield-ui

27 Components·4 Themes·TypeScript·Zero Deps

Severity Badge

Communicate threat levels at a glance. Supports pulse animation and count badges.

CRITICALHIGH12MEDIUMLOWINFO

tsx

<SeverityBadge level="CRITICAL" />
<SeverityBadge level="HIGH" pulse count={12} />
<SeverityBadge level="LOW" size="lg" />

Security Score

Animated circular gauge for security posture. Color shifts based on threshold ranges.

0/100

Overall

0/100

Dependencies

0/100

Headers

tsx

<SecurityScore score={92} label="Overall" />
<SecurityScore score={45} size={90} label="API Layer" />

Scan Progress

Animated progress bar with scanning shimmer. Supports scanning, complete, error, and warning states.

Scanning 847 packages...

✓CVE database updated

100%

✕Connection to OSV failed

34%

tsx

<ScanProgress progress={65} status="scanning" label="Scanning node_modules..." />

Status Indicator

Live pulsing status dots for system health monitoring. Five states with semantic colors.

Secure

High latency

Breached

Scanning

Offline

tsx

<StatusIndicator status="online" />
<StatusIndicator status="critical" label="DB Down" />

Threat Card

Expandable vulnerability card with CVE tracking, package info, and fix versions. Click to expand.

HIGHCVE-2024-38816

Path Traversal in Spring Framework

▼

MEDIUMCVE-2024-29041

Open Redirect in Express

▼

tsx

<ThreatCard
  id="CVE-2024-38816"
  severity="CRITICAL"
  title="Path Traversal"
  pkg="spring-webmvc"
  version="6.1.12"
  fixed="6.1.13"
/>

Terminal Output

macOS-styled terminal with optional character-by-character typing animation.

shield-scan

▌

tsx

<TerminalOutput title="shield-scan" typing lines={[
  { text: "$ scan .", color: "#fff" },
  { text: "  3 vulns found", color: "#ff2d55" },
]} />

Alert Banner

Dismissible notification banners for security events. Severity-aware styling.

🚨

Active Breach Detected

Unauthorized access pattern detected on production API. Incident response initiated.

⚠️

Dependency Alert

3 critical CVEs found in your dependency tree. Run update to patch.

💡

Scan Complete

All 847 packages scanned. No new vulnerabilities since last check.

tsx

<AlertBanner severity="CRITICAL" title="Breach Detected">
  Unauthorized access to production database.
</AlertBanner>

Shield Badge

Trust and verification status badges for packages, endpoints, or system components.

Verified

verified

Outdated

warning

Revoked

compromised

Unknown

unknown

tsx

<ShieldBadge status="verified" />
<ShieldBadge status="compromised" label="npm/lodash" />

CVE Tag

Compact inline CVE reference tags with severity dot indicators.

CVE-2024-38816CVE-2024-29041CVE-2024-28863CVE-2024-1234

tsx

<CveTag id="CVE-2024-38816" severity="CRITICAL" />

Data Flow Line

Animated directional data flow between components. Shows encryption status and threat indicators.

Browser

🔒

▶

API Gateway

API

⚠️

▶

Database

Auth

🔒

▶

Cache

tsx

<DataFlowLine from="Browser" to="API" encrypted />
<DataFlowLine from="API" to="DB" threat />

Metric Card

Animated security KPI cards with trend sparklines. Number animates on mount.

CVEs Found

0

↓3%vs last scan

Shield Score

0

↑5%vs last week

Open Ports

0

↑2%

Incidents

0

↓2%vs last week

tsx

<MetricCard title="CVEs Found" value={24} trend={-3} severity="HIGH" />
<MetricCard title="Shield Score" value={91} trend={5} />

Security Timeline

Chronological security event feed with severity indicators and metadata.

SSH brute-force detected

42 failed login attempts in 60 seconds

14:32

HIGH

CVE-2024-38816 patched

14:18

INFO

Privilege escalation attempt

sudo -l invoked by www-data user

13:55

CRITICAL

TLS certificate expiring

Expires in 12 days

13:10

MEDIUM

tsx

<SecurityTimeline events={[
  { time: "14:32", title: "SSH brute-force detected", severity: "HIGH" },
]} />

Risk Matrix

5×5 likelihood/impact grid for visual risk prioritization. Hover cells for details.

LIKELIHOOD

Certain

Likely

Possible

Unlikely

Rare

NegligibleMinorModerateMajorSevere

IMPACT

tsx

<RiskMatrix items={[
  { label: "SQL Injection", likelihood: 4, impact: 5 },
  { label: "XSS", likelihood: 3, impact: 3 },
]} />

Attack Chain

MITRE ATT&CK-style kill chain visualization. Click a stage to expand techniques.

🔍

Recon

3

▶

⚙️

Weaponize

2

▶

📧

Deliver

3

▶

💥

Exploit

2

▶

📦

Install

3

▶

📡

C2

2

▶

🎯

Actions

2

tsx

<AttackChain
  activePhases={["recon", "exploit"]}
  techniques={{ recon: ["Port scan", "OSINT"] }}
/>

Compliance Badge

Status badges for major compliance frameworks: SOC 2, ISO 27001, GDPR, HIPAA, PCI DSS, NIST.

🛡️

SOC 2

✓Compliant

📋

ISO 27001

✓Compliant

🇪🇺

GDPR

◐In Progress

🏥

HIPAA

✕Failing

💳

PCI DSS

✓Compliant

🏛️

NIST

—N/A

tsx

<ComplianceBadge standard="SOC2" status="compliant" />
<ComplianceBadge standard="GDPR" status="in-progress" />

Password Strength

Live entropy-based password analyzer with estimated crack time.

Strong

Entropy: 79bitCrack time: 1.9M yr

tsx

<PasswordStrength value={password} onChange={setPassword} />

Secret Code Block

Code viewer with regex-based secret detection — highlights AWS keys, JWTs, passwords, and connection strings.

config.env⚠ 4 secrets

DATABASE_URL=postgres://admin:s3cr3tP@ss@db.prod.internal:5432/app
AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE
API_KEY=sk-live-aBcDeFgHiJkLmNoPqRsTuV
JWT_SECRET=super-secret-key
SESSION_TOKEN=eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiYWRtaW4ifQ.abc123def456

tsx

<SecretCodeBlock title="config.env" code={envContent} />

Port Scan Map

Visual port scan results with well-known service labels and danger indicators for risky ports.

22SSH

80HTTP

443HTTPS

21FTP⚠ RISK

23Telnet⚠ RISK

3306MySQL

3389RDP⚠ RISK

6379Redis

27017MongoDB

8080HTTP-Alt

tsx

<PortScanMap ports={[22, 80, 443, { port: 3389, status: "open" }]} />

Heatmap Grid

2D intensity heatmap for visualizing vulnerability density across time or services.

Mon

1

3

5

4

2

Tue

2

8

6

3

1

Wed

1

1

4

7

5

2

Thu

3

5

8

3

Fri

1

2

6

4

2

Sat

1

2

1

Sun

1

0003060912151821

tsx

<HeatmapGrid
  yLabels={["Mon","Tue","Wed"]}
  xLabels={["00","06","12","18"]}
  data={[[0,2,5,1],[3,0,8,2],[1,4,2,6]]}
/>

Log Stream

Live scrolling log viewer with severity-colored lines, regex filtering, and pause/resume control.

shield-scan output8 lines
32:01INFOscannerDependency scan started — 847 packages
32:03DEBUGresolverResolving transitive deps for express@4.18.2
32:07HIGHcve-dbCVE-2024-29041 matched in express@4.18.2
32:07CRITICALcve-dbCVE-2024-38816 matched in spring-webmvc@6.1.12
32:09MEDIUMcve-dbCVE-2024-28863 matched in tar@6.2.0
32:11INFOscannerScan complete — 3 vulnerabilities found
32:12DEBUGreporterGenerating JSON report to ./shield-report.json
32:12INFOreporterReport written successfully

tsx

<LogStream lines={lines} title="scanner" filter="CVE" />

Certificate Card

SSL/TLS certificate info with expiry countdown. Color shifts to amber/red as expiry approaches.

🔒api.example.com

Valid · 64d remaining

IssuerLet's Encrypt R3

Key TypeEC P-256

Valid From2024-11-01

Valid To2026-08-01

SHA-256 Fingerprint

3A:9B:4C:12:DE:88:FA:01:CC:45:77:B2:99:E…

Subject Alternative Names

api.example.com*.api.example.comexample.com

Chain of Trust

ISRG Root X1

→Let's Encrypt R3

🔒legacy.internal.corp

Expiring in 4d

IssuerInternal CA

Key TypeRSA 2048

Valid From2025-04-01

Valid To2026-06-02

SHA-256 Fingerprint

B1:2C:8D:99:FA:23:01:AB:CD:77:12:EE:43:8…

tsx

<CertificateCard
  subject="api.example.com"
  issuer="Let's Encrypt R3"
  validFrom="2024-01-01"
  validTo="2026-08-01"
/>

Vuln Donut Chart

Animated SVG donut chart for vulnerability severity breakdown. Sweeps arcs on mount.

critical3

high12

medium27

low8

info4

high2

medium5

low14

info9

critical8

tsx

<VulnDonutChart critical={3} high={12} medium={27} low={8} info={4} />

Threat Radar

Spider/radar chart showing security coverage across dimensions. Animates on mount.

Production

Staging

tsx

<ThreatRadar axes={[
  { label: "Network", value: 72 },
  { label: "Identity", value: 88 },
]} />

IP Reputation Badge

Threat intelligence enrichment for IPs and domains — shows risk score, categories, and geo info.

2RISK

8.8.8.8

🇺🇸 US

AS15169 Google LLC

67RISK

45.142.212.100

🇳🇱 NL

ScannerSpam

AS60899 Liteserver

97RISK

185.220.101.34

🇩🇪 DE

TorMalwareBotnet

AS60729 Tor Relay

tsx

<IPReputationBadge ip="185.220.101.34" score={94} categories={["tor","malware"]} country="RU" />

Firewall Rule

Visual display for firewall / ACL policy rules with source, destination, protocol, and action.

Firewall Rules5 rules

#10

10.0.0.0/8→10.0.1.50TCP:443

Internal HTTPSALLOW

#20

0.0.0.0/0→ANYTCP:23

Block TelnetDENY

Telnet is unencrypted — deny all inbound

#30

192.168.1.0/24→10.0.1.50UDP:161

SNMP monitoringALLOW

#40

0.0.0.0/0→0.0.0.0/0TCP:3389

Block RDPDROP

RDP exposed to internet — drop immediately

#99

ANY→ANYANY

Default log-allLOG

tsx

<FirewallRule rules={[
  { src: "0.0.0.0/0", dst: "10.0.0.1", proto: "TCP", port: "443", action: "allow" },
  { src: "0.0.0.0/0", dst: "ANY", proto: "TCP", port: "23", action: "deny" },
]} />

Command Palette

Keyboard-searchable modal for security-ops dashboards. Navigate with ↑↓, execute with Enter.

tsx

<CommandPalette open={open} onClose={() => setOpen(false)} commands={cmds} />

Threat Hunter Query

Threat hunting query viewer with language badge, MITRE technique mapping, and syntax highlighting.

KQLLateral Movement via WMIT1021.003 (Lateral Movement)

SecurityEvent
| where EventID == 4688
| where ProcessName has "wmiprvse.exe"
| extend ParentProc = tostring(ParentProcessName)
| where ParentProc !in ("services.exe", "svchost.exe")
| project TimeGenerated, Computer, Account, ProcessName, ParentProc
| summarize count() by Computer, Account
| where count_ > 3

HIGH confidence#lateral-movement#wmi#windowsby shield-ui

SigmaSuspicious PowerShell Encoded CommandT1059.001 (Execution)

title: Suspicious PowerShell Encoded Command
status: experimental
logsource:
  category: process_creation
  product: windows
detection:
  selection:
    CommandLine|contains:
      - '-EncodedCommand'
      - '-enc '
      - '-ec '
  condition: selection
falsepositives:
  - Legitimate admin scripts
level: medium

MEDIUM confidence#powershell#defense-evasion#obfuscation

tsx

<ThreatHunterQuery
  language="KQL"
  query={kqlQuery}
  technique="T1059.001"
  confidence="high"
/>

@bene-npm/shield-ui · Built by Benedikt Pankratz

github.com/Beneking102 · MIT License