Radar
Pro
A radar screen with range rings, a sweeping beam with a phosphor trail and contacts that light up as it passes.
Target acquired
Customize
1
8
Labels
#ff784f
Installation
Radar is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy radar.tsx into components/ui and run npm install motion.
Usage
import { Radar } from "@/components/ui/radar";
<section className="relative h-[600px] bg-ink-950">
<Radar blips={8} labels={["Alpha", "Bravo", "Kilo"]} />
</section>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ff784f" | Screen color as a hex value. |
| speed | number | 1 | Sweep speed multiplier. One turn takes four seconds at 1. |
| rings | number | 4 | Number of range rings. |
| blips | number | 8 | Number of contacts on the screen. |
| labels | boolean | string[] | false | Show a code next to each contact, or pass your own labels. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion