@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.

47 components react shadcn-cli

website ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/registry.json

pnpm pnpm dlx shadcn@latest add https://sf-fleet-hud.vercel.app/r/registry.json

bun bunx shadcn@latest add https://sf-fleet-hud.vercel.app/r/registry.json

fetch registry curl -s https://sf-fleet-hud.vercel.app/r/registry.json

Components

47 total

HUD Theme 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

HUD Theme — Cyan Accent 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 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 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 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 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 ui

Segmented capacity indicator.

npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/segment-bar.json

Kbd ui

Keyboard shortcut chip.

npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-kbd.json

HUD Skeleton 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 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 ui

Mono uppercase micro-label for form fields.

npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-label.json

HUD Input 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 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 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 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 ui

Circular radio with solid accent dot.

npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-radio-group.json

HUD Select 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 ui

Underline tabs: condensed uppercase, 2px accent indicator.

npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-tabs.json

HUD Alert 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 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 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 ui

Dark mono tooltip with arrow.

npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-tooltip.json

HUD Context Menu 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 Toaster 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 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 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 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 ui

Removable filter/tag chip in mono uppercase.

npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-chip.json

HUD Accordion 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 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 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 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 ui

Dark bordered popover surface.

npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-popover.json

HUD Input OTP 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 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 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 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 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 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 ui

Accent-tinted intensity matrix (values 0–1).

npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-heatmap.json

HUD Timeline 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 ui

Hierarchical nav tree with accent selection rail.

npx shadcn@latest add https://sf-fleet-hud.vercel.app/r/hud-tree.json

HUD Dropzone 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 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 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 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 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