Service radar
Sweeping pixel radar where each service node lights up as the beam passes; Ping sends out a ring that flashes every node it touches.
Installation
pnpm dlx shadcn@latest add @lumesec/px-radarFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-radar.jsonUsage
import { PxRadar } from "@/components/lumesec/px-radar";
export function Example() {
return (
<PxRadar />
);
}Behaviour
A sweeping radar where each service lights up as the beam passes and fades over a revolution. Ping sends a ring out that flashes every node it touches.
API reference
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
pingReact proponPingDetail{}Fires when the Ping button is pressed.
Keyboard
| Keys | Action |
|---|---|
| ArrowRight / ArrowDown | Select the next node and show its tooltip. |
| ArrowLeft / ArrowUp | Select the previous node and show its tooltip. |
Accessibility
- The canvas is focusable with
role="img"andaria-label="Radar of 6 service nodes. Arrow keys step through them.". - The node tooltip is plain text and not a live region, so stepping through nodes is not announced. Blurring the canvas clears the selection.
- The summary ("6 nodes · 1 degraded") is an
aria-live="polite"region. Ping is a native button. - Reduced motion: the beam stays at a fixed angle, nodes stop drifting and keep a steady brightness; the ping ring still expands.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --card, --foreground, --lumesec and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-muted and --ui-surface.
Notes
- The nodes are built-in demo data: api-eu-1 (42 ms), api-us-2 (88 ms), edge-tokyo (131 ms, degraded), worker-7 (27 ms), db-primary (9 ms) and queue-3 (64 ms).
- The radar is a fixed 232 by 232px and animates continuously while on screen.
Related
Was this page helpful?