SF FLEET HUD

Overview

SF Fleet HUD is an MIT-licensed shadcn/ui registry that restyles the standard primitives as a dark sci-fi fleet-operations interface. The theme is dark-only, monochrome with an orange accent, uses a radius of 0, and pairs a condensed sans for headings with a terminal mono for labels and data.

The registry holds 45 UI components and two themes: the base theme-hud and a theme-hud-cyan accent override. Alongside restyled inputs, dialogs, tables and menus, it adds HUD-specific widgets such as a rotating radar, ring gauges, telemetry bars, an interactive canvas dot globe and dependency-free SVG charts. The demo site composes these into a live "command deck" dashboard and offers optional scanline and glow effects.

Features

• HUD widgets: Radar with data-driven blips, conic-gradient gauge, sparkline, segment bar, heatmap and audit-log timeline
• Dot globe: Canvas earth globe with drag to rotate, wheel to zoom and incident-state markers
• Dependency-free charts: SVG line chart with multi-series dash patterns and caution bands, plus a grouped bar chart
• Restyled primitives: Corner-clipped buttons, bracketed panels and dialogs, square switches, checkboxes, OTP cells and calendar
• Data and navigation: Table with filter chips and pagination, command palette (cmdk), tree, breadcrumb, stepper and context menu
• Status components: Square mono status badges with a blinking dot, directive and critical alerts, and Sonner toasts
• Crew card: Personnel card with portrait, callsign, rank ticks, assignment and duty telemetry
• Two themes: Orange default and a cyan accent override that keeps warnings warm

Tech stack

• React, Tailwind CSS, shadcn/ui, cmdk, Sonner

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @sf-fleet-hud/component-name