Severity Badge
<SeverityBadge />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
<SecurityScore />Animated circular gauge for security posture. Color shifts based on threshold ranges.
tsx
<SecurityScore score={92} label="Overall" />
<SecurityScore score={45} size={90} label="API Layer" />Scan Progress
<ScanProgress />Animated progress bar with scanning shimmer. Supports scanning, complete, error, and warning states.
Scanning 847 packages...
0%✓CVE database updated
100%✕Connection to OSV failed
34%tsx
<ScanProgress progress={65} status="scanning" label="Scanning node_modules..." />Status Indicator
<StatusIndicator />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
<ThreatCard />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
<TerminalOutput />macOS-styled terminal with optional character-by-character typing animation.
tsx
<TerminalOutput title="shield-scan" typing lines={[
{ text: "$ scan .", color: "#fff" },
{ text: " 3 vulns found", color: "#ff2d55" },
]} />Alert Banner
<AlertBanner />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
<ShieldBadge />Trust and verification status badges for packages, endpoints, or system components.
tsx
<ShieldBadge status="verified" />
<ShieldBadge status="compromised" label="npm/lodash" />
CVE Tag
<CVETag />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
<DataFlowLine />Animated directional data flow between components. Shows encryption status and threat indicators.
tsx
<DataFlowLine from="Browser" to="API" encrypted />
<DataFlowLine from="API" to="DB" threat />
Metric Card
<MetricCard />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
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
<SecurityTimeline />Chronological security event feed with severity indicators and metadata.
SSH brute-force detected
42 failed login attempts in 60 seconds
Privilege escalation attempt
sudo -l invoked by www-data user
TLS certificate expiring
Expires in 12 days
tsx
<SecurityTimeline events={[
{ time: "14:32", title: "SSH brute-force detected", severity: "HIGH" },
]} />Risk Matrix
<RiskMatrix />5×5 likelihood/impact grid for visual risk prioritization. Hover cells for details.
LIKELIHOOD
NegligibleMinorModerateMajorSevere
IMPACT
tsx
<RiskMatrix items={[
{ label: "SQL Injection", likelihood: 4, impact: 5 },
{ label: "XSS", likelihood: 3, impact: 3 },
]} />Attack Chain
<AttackChain />MITRE ATT&CK-style kill chain visualization. Click a stage to expand techniques.
tsx
<AttackChain
activePhases={["recon", "exploit"]}
techniques={{ recon: ["Port scan", "OSINT"] }}
/>Compliance Badge
<ComplianceBadge />Status badges for major compliance frameworks: SOC 2, ISO 27001, GDPR, HIPAA, PCI DSS, NIST.
tsx
<ComplianceBadge standard="SOC2" status="compliant" />
<ComplianceBadge standard="GDPR" status="in-progress" />
Password Strength
<PasswordStrength />Live entropy-based password analyzer with estimated crack time.
tsx
<PasswordStrength value={password} onChange={setPassword} />Secret Code Block
<SecretCodeBlock />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
<PortScanMap />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
<HeatmapGrid />2D intensity heatmap for visualizing vulnerability density across time or services.
tsx
<HeatmapGrid
yLabels={["Mon","Tue","Wed"]}
xLabels={["00","06","12","18"]}
data={[[0,2,5,1],[3,0,8,2],[1,4,2,6]]}
/>@bene-npm/shield-ui · Built by Benedikt Pankratz
github.com/Beneking102 · MIT License