127 Components
Digital Radar
BackgroundsTactical polar radar sweep background featuring concentric nautical range rings, degree azimuth ticks, a rotating phosphor conic beam, and target blips that illuminate with decaying afterglow on sweep contact.
Polar Scope Sweep
Digital Radar
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/digital-radar.json"
Props
TypeScript props supported by <DigitalRadar />.
| Prop | Type | Default | Description |
|---|---|---|---|
| sweepSpeed | number | 1.0 | Angular velocity multiplier for the rotating radar beam. |
| blipCount | number | 8 | Number of tracked target contacts distributed across the polar grid. |
| color | string | "#10B981" | Primary radar phosphor color in hex format. |
| rangeRings | number | 4 | Number of concentric range rings rendered from the radar origin. |
| showTelemetry | boolean | true | Displays flight-level callouts, target IDs, and compass bearings. |
| children | React.ReactNode | — | Optional foreground UI rendered above the radar canvas. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- Multi-slice phosphor conic sweep beam that triggers expanding target pings upon angular intersection.
- Precision azimuth degree ring, dashed diagonal crosshairs, and nautical mile range markers.
- Live interactive HUD controls for target count, telemetry callouts, phosphor color, and sweep velocity.
Keyboard & Accessibility
- Marks the tactical radar <canvas> with aria-hidden='true' to keep screen reader navigation focused on semantic content.
- All interactive HUD controls include keyboard focus styles and descriptive accessible labels.