@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 */}
<ShieldProvider theme="hacker">     {/* green-on-black terminal */}
<ShieldProvider theme="corporate">  {/* light, professional */}

Components

19 components across 5 categories — full prop tables and examples at bene-ui.vercel.app/docs.

| Component | Description | |-----------|-------------| | SeverityBadge | Threat level badge with pulse animation and count | | SecurityScore | Animated circular gauge for security posture | | ScanProgress | Progress bar with scanning shimmer | | StatusIndicator | Pulsing status dot for system health | | ThreatCard | Expandable CVE card with fix info | | TerminalOutput | macOS-style terminal with typing animation | | AlertBanner | Dismissible severity-aware notification | | ShieldBadge | Trust/verification status badge | | CveTag | Compact inline CVE reference tag | | MetricCard | KPI card with animated counter and sparkline | | SecurityTimeline | Chronological security event feed | | RiskMatrix | 5×5 likelihood/impact risk grid | | AttackChain | MITRE ATT&CK-style kill chain visualization | | ComplianceBadge | SOC2, GDPR, HIPAA, ISO27001, PCI, NIST badges | | DataFlowLine | Animated encrypted/threat data flow | | PasswordStrength | Live entropy-based password strength meter | | SecretCodeBlock | Code viewer with automatic secret detection | | PortScanMap | Visual port scan results with service labels | | HeatmapGrid | 2D intensity heatmap for vulnerability density |

License

MIT © Benedikt Pankratz