---
name: "@sf-fleet-hud"
slug: "sf-fleet-hud"
description: "A dark sci-fi fleet-ops UI kit. Restyled primitives plus HUD widgets: radar, gauges, telemetry bars, an interactive dot globe and dependency-free charts. Dark-only, radius 0."
category: "Charts/data viz"
tags: ["3d", "auth", "buttons", "cards", "charts", "design-system", "forms", "hooks", "loaders", "maps", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: null
author: null
website: "https://sf-fleet-hud.vercel.app"
github: null
registry: "https://sf-fleet-hud.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 47
generated_at: "2026-09-21T01:50:16.753Z"
---

# @sf-fleet-hud

A dark sci-fi fleet-ops UI kit. Restyled primitives plus HUD widgets: radar, gauges, telemetry bars, an interactive dot globe and dependency-free charts. Dark-only, radius 0.

## Links

- Website: https://sf-fleet-hud.vercel.app
- Registry JSON: https://sf-fleet-hud.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/sf-fleet-hud
- This file: https://sh4dcn.vercel.app/md/sf-fleet-hud.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://sf-fleet-hud.vercel.app/r/registry.json
bunx shadcn@latest add https://sf-fleet-hud.vercel.app/r/registry.json
# fetch the raw registry index
curl -s https://sf-fleet-hud.vercel.app/r/registry.json
```

## Components (47)

| name | type | description | install |
| --- | --- | --- | --- |
| theme-hud | registry:theme | Dark sci-fi ops theme: monochrome + orange accent, radius 0, condensed sans + terminal mono. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/theme-hud.json` |
| theme-hud-cyan | registry:theme | Cyan accent override for the HUD theme. Install after theme-hud; warnings and destructive tones stay warm. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/theme-hud-cyan.json` |
| hud-button | registry:ui | Corner-clipped primary, outline, ghost, destructive variants. Condensed uppercase. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-button.json` |
| hud-panel | registry:ui | Card panel with optional orange corner brackets, header/content/footer. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-panel.json` |
| status-badge | registry:ui | Square mono badges: engaged / priority / patrol / standby / critical (+ blinking dot). | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/status-badge.json` |
| telemetry-bar | registry:ui | 3px labelled progress bar with mono label/value row. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/telemetry-bar.json` |
| segment-bar | registry:ui | Segmented capacity indicator. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/segment-bar.json` |
| hud-kbd | registry:ui | Keyboard shortcut chip. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-kbd.json` |
| hud-skeleton | registry:ui | Skeleton block with fixed-width shimmer clipped inside each block. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-skeleton.json` |
| radar | registry:ui | Sector-scan radar with rotating sweep. Decorative by default; accepts polar `blips` ({angle, distance, hot}) to plot real data. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/radar.json` |
| hud-label | registry:ui | Mono uppercase micro-label for form fields. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-label.json` |
| hud-input | registry:ui | Terminal-style text input: mono, square, focus ring in accent. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-input.json` |
| hud-textarea | registry:ui | Terminal-style textarea with optional live character counter (showCount + maxLength). | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-textarea.json` |
| hud-switch | registry:ui | Square 36x18 switch with accent thumb when checked. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-switch.json` |
| hud-checkbox | registry:ui | Square checkbox with solid accent fill marker. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-checkbox.json` |
| hud-radio-group | registry:ui | Circular radio with solid accent dot. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-radio-group.json` |
| hud-select | registry:ui | Dark popover select: accent top edge, 2px accent active rail, diamond marker. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-select.json` |
| hud-tabs | registry:ui | Underline tabs: condensed uppercase, 2px accent indicator. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-tabs.json` |
| hud-alert | registry:ui | Directive/critical alert strip with icon glyph and tinted border. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-alert.json` |
| hud-dialog | registry:ui | Corner-bracketed modal with header/body/footer and mono close glyph. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-dialog.json` |
| hud-sheet | registry:ui | Side drawer panel: 280px, hairline dividers, mono accent title. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-sheet.json` |
| hud-tooltip | registry:ui | Dark mono tooltip with arrow. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-tooltip.json` |
| hud-context-menu | registry:ui | Right-click menu: mono rows, shortcut hints, destructive variant. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-context-menu.json` |
| hud-sonner | registry:ui | Sonner toast stack in HUD style: accent left rail, glyph icons. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-sonner.json` |
| hud-command | registry:ui | Command palette (cmdk): > prompt, accent active rail, hint footer. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-command.json` |
| hud-table | registry:ui | Data table shell: mono micro-headers, deep row borders, selected tint. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-table.json` |
| hud-pagination | registry:ui | 26px square page buttons with accent active state. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-pagination.json` |
| hud-chip | registry:ui | Removable filter/tag chip in mono uppercase. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-chip.json` |
| hud-accordion | registry:ui | Bordered accordion with rotating caret and hairline dividers. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-accordion.json` |
| hud-breadcrumb | registry:ui | Mono breadcrumb trail with caret separators, accent current page. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-breadcrumb.json` |
| hud-avatar | registry:ui | Square initials avatar with status dot and rank bars. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-avatar.json` |
| hud-slider | registry:ui | 2px track slider with diamond thumbs; supports ranges. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-slider.json` |
| hud-popover | registry:ui | Dark bordered popover surface. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-popover.json` |
| hud-input-otp | registry:ui | 38x44 code cells with accent active border and blinking caret. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-input-otp.json` |
| hud-calendar | registry:ui | Mono grid calendar with accent selection and range tint. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-calendar.json` |
| hud-gauge | registry:ui | Masked conic-gradient ring gauge with numeric readout. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-gauge.json` |
| hud-sparkline | registry:ui | Inline SVG sparkline driven by a values array. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-sparkline.json` |
| hud-line-chart | registry:ui | Dependency-free SVG time-series plot: multi-series with dash-pattern separation, axis grid, caution band, direct end-labels and a hover crosshair readout. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-line-chart.json` |
| hud-bar-chart | registry:ui | Dependency-free categorical bar chart: vertical or horizontal, grouped series with 2px surface gaps and per-bar hover readout. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-bar-chart.json` |
| hud-heatmap | registry:ui | Accent-tinted intensity matrix (values 0–1). | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-heatmap.json` |
| hud-timeline | registry:ui | Audit-log timeline with diamond markers and connector rail. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-timeline.json` |
| hud-tree | registry:ui | Hierarchical nav tree with accent selection rail. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-tree.json` |
| hud-dropzone | registry:ui | Dashed drop target with accent hover and file input. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-dropzone.json` |
| hud-stepper | registry:ui | Multi-step indicator: done/active/todo squares with connectors. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-stepper.json` |
| hud-typography | registry:ui | Heading scale H1-H6 + body: condensed sans headings, mono overline/micro labels, accent index and tick. | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-typography.json` |
| dot-globe | registry:ui | Interactive dotted earth globe (canvas): drag to rotate, wheel to zoom, markers with incident state. Land dots derived from Natural Earth (public domain). | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/dot-globe.json` |
| crew-card | registry:ui | Personnel card: portrait, name/callsign, rank ticks, assignment, status and vitals/duty telemetry. Portrait is supplied via the photo prop — no images ship wit… | `npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/crew-card.json` |

## For AI agents

```text
You are adding components from @sf-fleet-hud to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/sf-fleet-hud.md) for the component list.
2. Fetch the machine-readable index: https://sf-fleet-hud.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: sf-fleet-hud).
```