@scfools/hud-kit

Tactical HUD component library for Angular. Dark-themed, data-dense UI components designed for Star Citizen data visualization.

Install

npm install @scfools/hud-kit

Requires Angular 19+ as a peer dependency.

Setup

1. Include design tokens

Add the HUD tokens stylesheet to your angular.json styles array:

"styles": [
  "node_modules/@scfools/hud-kit/tokens/hud-tokens.css",
  "src/styles.css"
]

Or import it in your global stylesheet:

@import '@scfools/hud-kit/tokens/hud-tokens.css';

2. Include fonts

Add Space Grotesk and JetBrains Mono from Google Fonts to your index.html:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">

Entry Points

@scfools/hud-kit/tokens

Design token constants for use in TypeScript.

import { HUD_COLORS, HUD_SERIES_COLORS } from '@scfools/hud-kit/tokens';

• HUD_COLORS -- named color constants (primary, secondary, danger, surfaces)
• HUD_SERIES_COLORS -- ordered palette for chart series

@scfools/hud-kit/chrome

App shell components: navigation bars, status indicators.

import { HudTopBar, HudSideNav, HudStatusBadge, HudBottomBar } from '@scfools/hud-kit/chrome';

@scfools/hud-kit/headers

Page and section title components.

import { HudPageTitle, HudSectionHeader } from '@scfools/hud-kit/headers';

@scfools/hud-kit/stats

Stat display components: KPI cards, gauges, readouts, ratings.

import {
  HudKpiCard, HudCompactStat, HudStatUnderbar, HudDelta,
  HudRingGauge, HudDigitalReadout, HudOverlayReadout,
  HudSegmentedBar, HudControlSurfaceRow, HudCombatRating
} from '@scfools/hud-kit/stats';

@scfools/hud-kit/charts

SVG chart components and composite panels.

// Individual charts
import {
  GroupedBarsComponent, StackedBarsComponent, BulletChartComponent,
  RadarChartComponent, ScatterPlotComponent, HeatmapGridComponent,
  LineAreaChartComponent, BubblePlotComponent, PowerFlowComponent,
  // ... 20 chart types total
} from '@scfools/hud-kit/charts';

// Composite panels (pre-configured chart groups)
import {
  OffensivePanelComponent, DefensivePanelComponent,
  PowerPanelComponent, RadarPanelComponent, FlightPanelComponent
} from '@scfools/hud-kit/charts';

// Types
import type { ChartSeries, ChartDataPoint } from '@scfools/hud-kit/charts';

@scfools/hud-kit/comparison

Side-by-side comparison components.

import {
  HudComparisonRow, HudShipComparisonCard,
  HudTelemetryTable, HudFleetHubCard
} from '@scfools/hud-kit/comparison';

@scfools/hud-kit/controls

Interactive controls: buttons, filters, alerts, tags.

import { HudAlertCard, HudDataTag, HudButton, HudFilterPanel } from '@scfools/hud-kit/controls';

@scfools/hud-kit/edge

Glassmorphism-styled display components.

import {
  EdgeRadarChartComponent, EdgeCircleGraphComponent,
  EdgeProgressBarComponent, EdgeBadgeComponent,
  EdgeStatCardComponent, EdgeBentoCardComponent,
  EdgeGlassPanelComponent, EdgeInlineAlertComponent
} from '@scfools/hud-kit/edge';

Usage Example

import { Component } from '@angular/core';
import { HudPageTitle } from '@scfools/hud-kit/headers';
import { HudKpiCard, HudRingGauge } from '@scfools/hud-kit/stats';
import { HudComparisonRow } from '@scfools/hud-kit/comparison';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [HudPageTitle, HudKpiCard, HudRingGauge, HudComparisonRow],
  template: `
    <hud-page-title label="Fleet Overview" />
    <div class="grid">
      <hud-kpi-card label="Ships" [value]="fleet.count" />
      <hud-ring-gauge label="Shield HP" [value]="shields.current" [max]="shields.max" />
      <hud-comparison-row label="Speed" [values]="[shipA.speed, shipB.speed]" unit="m/s" />
    </div>
  `
})
export class DashboardComponent { }

Theming

All components use CSS custom properties from hud-tokens.css. Override them to customize:

:root {
  --hud-primary: #00ff88;
  --hud-secondary: #ff6600;
  --hud-bg: #0a0a0a;
  --hud-surface: #0a0a0a;
  --hud-font-display: 'Your Font', sans-serif;
}

See hud-tokens.css for the full list of available properties.

License

MIT