@bene-npm/shield-ui

Security-themed React component library — dashboards, scanners, threat visualization.

Live Demo & Docs · npm · GitHub

Install

npm install @bene-npm/shield-ui

React 18 or 19. Zero dependencies. No CSS imports required.

Quick Start

import { ShieldProvider, SeverityBadge, SecurityScore, ThreatCard } from "@bene-npm/shield-ui";

export default function Dashboard() {
  return (
    <ShieldProvider theme="dark">
      <SeverityBadge level="CRITICAL" pulse />
      <SecurityScore score={84} label="Overall" />
      <ThreatCard
        id="CVE-2024-38816"
        severity="HIGH"
        title="Path Traversal"
        pkg="spring-webmvc"
        version="6.1.12"
        fixed="6.1.13"
      />
    </ShieldProvider>
  );
}

ShieldProvider is optional — components fall back to the dark theme without it.

Themes

<ShieldProvider theme="dark">        {/* default — deep black, cyan accent */}
<ShieldProvider theme="hacker">      {/* green-on-black terminal */}
<ShieldProvider theme="corporate">   {/* light, professional */}
<ShieldProvider theme="midnight">    {/* deep navy, gold accent — new in v2.1 */}

Custom theme — pass any Theme object and it merges over the dark base:

<ShieldProvider theme={{ accent: "#a855f7", bg: "#0f0a1e" }}>

Components

27 components across 7 categories — full prop tables and live demos at bene-ui.vercel.app · /docs.

Display & Badges

| Component | Description | |-----------|-------------| | SeverityBadge | Threat level badge with pulse animation and count bubble | | ShieldBadge | Trust/verification status badge (verified/warning/compromised) | | CveTag | Compact inline CVE reference tag with severity dot | | ComplianceBadge | SOC2, GDPR, HIPAA, ISO27001, PCI DSS, NIST status badges | | IPReputationBadge | Threat intel badge — risk score, categories, country, ASN |

Scanning & Progress

| Component | Description | |-----------|-------------| | SecurityScore | Animated circular gauge for security posture (0–100) | | ScanProgress | Progress bar with scanning shimmer and status states | | StatusIndicator | Pulsing status dot for system health monitoring | | MetricCard | KPI card with animated counter, trend arrow, and sparkline | | VulnDonutChart | Animated SVG donut chart for severity breakdown |

Threat & Intelligence

| Component | Description | |-----------|-------------| | ThreatCard | Expandable CVE card with package, version, and fix info | | AlertBanner | Dismissible severity-aware notification banner | | SecurityTimeline | Chronological security event feed with severity dots | | RiskMatrix | 5×5 likelihood/impact risk prioritization grid | | AttackChain | MITRE ATT&CK-style kill chain visualization | | ThreatRadar | Spider/radar chart for security posture across dimensions |

Terminal & Code

| Component | Description | |-----------|-------------| | TerminalOutput | macOS-style terminal with optional typing animation | | SecretCodeBlock | Code viewer with automatic secret detection (AWS keys, JWTs…) | | PasswordStrength | Live entropy-based password strength meter | | ThreatHunterQuery | KQL / Sigma / YARA query viewer with MITRE technique mapping |

Data Visualization

| Component | Description | |-----------|-------------| | HeatmapGrid | 2D intensity heatmap for vulnerability density | | DataFlowLine | Animated encrypted/threat data flow visualization | | PortScanMap | Visual port scan results with well-known service labels |

Network & Infrastructure

| Component | Description | |-----------|-------------| | CertificateCard | SSL/TLS cert info with live expiry countdown | | FirewallRule | Visual firewall/ACL rule table |

UX

| Component | Description | |-----------|-------------| | LogStream | Live scrolling log viewer with filter, pause/resume, severity colors | | CommandPalette | Keyboard-searchable modal (↑↓ Enter Esc) for security-ops dashboards |

Theme API

import { useTheme, useSev, getSevColor, useAnimVal, useReducedMotion } from "@bene-npm/shield-ui";

// Access the active theme object
const t = useTheme();

// Get severity color as a string
const color = useSev("CRITICAL");         // hook — use in component body
const color = getSevColor(t, "HIGH");     // plain function — safe in .map()

// Animate a number from 0 → target over duration (ms)
const animated = useAnimVal(score, 700);

// Respect prefers-reduced-motion
const reduced = useReducedMotion();

TypeScript

import type {
  Theme, ThemeName,
  SeverityLevel,   // "CRITICAL" | "HIGH" | "MEDIUM" | "LOW" | "INFO"
  LogLine,         // { id?, time?, level?, source?, message }
  PaletteCommand,  // { id, label, action, description?, icon?, group?, keywords? }
  RadarAxis,       // { label, value, max? }
  FWRule,          // firewall rule shape
  QueryLanguage,   // "KQL" | "SPL" | "YARA" | "Sigma" | "SQL" | "EQL" | "Lucene"
  ThreatCategory,  // "malware" | "spam" | "botnet" | "phishing" | "scanner" | "proxy" | "tor"
  TerminalLine, ComplianceStandard, PortEntry,
} from "@bene-npm/shield-ui";

Changelog

v2.1.0

• 8 new components: LogStream, CertificateCard, VulnDonutChart, CommandPalette, ThreatRadar, IPReputationBadge, FirewallRule, ThreatHunterQuery
• New theme: midnight (deep navy + gold accent)
• Custom theme support: ShieldProvider now accepts a full or partial Theme object
• New hook: useReducedMotion() — respects prefers-reduced-motion

v2.0.0

• 9 new components: MetricCard, SecurityTimeline, RiskMatrix, AttackChain, ComplianceBadge, HeatmapGrid, DataFlowLine, PortScanMap, CveTag
• 3-theme system: dark / hacker / corporate
• ShieldProvider context and useTheme() hook

v1.0.0

• Initial release — 10 core components

License

MIT © Benedikt Pankratz