Coverage plan

Wi-Fi coverage on a floor plan for the selected band; drag access points and clients join the strongest one in range.

<ln-floorplan>· loading

Tryswitch to 6 GHz, then drag AP Office toward the lab.

Installation

pnpm dlx shadcn@latest add @lumesec/ln-floorplan

First 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}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/ln-floorplan.json

Usage

import { LnFloorplan } from "@/components/lumesec/ln-floorplan";

export function Example() {
  return (
    <LnFloorplan />
  );
}

Behaviour

Coverage on the floor plan for the selected band. Drag access points to move it; clients join the strongest one in range and their traffic runs along that link.

API reference

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

moveReact proponMoveDetail{ ap: string, x: number, y: number }

Fires when a pointer drag of an access point ends and its position changed; a press without movement does not fire it. x and y are plan coordinates (0 to 600 by 0 to 360). Arrow-key moves do not fire it.

radioReact proponRadioDetail{ ap: string, on: boolean }

Fires when the radio of the selected access point is switched.

Keyboard

Keys	Action
ArrowLeft / ArrowRight / ArrowUp / ArrowDown	On a focused access point: move it 10 plan units and select it.

Accessibility

Access points are buttons with aria-pressed and an aria-label such as "AP Office. Drag or use arrow keys to move."
The band control is a role="group" labelled Band with aria-pressed buttons.
The detail line for the selected access point is aria-live="polite". Its radio control is a role="switch" labelled "Radio for …" with the access point name.
The plan SVG and the coverage canvas are aria-hidden; coverage, connected clients and weak-signal counts are text.
Reduced motion: client traffic pixels are not drawn; coverage and client links still update when an access point moves or the band changes.

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 --background, --border, --card, --destructive, --foreground, --input, --lumesec and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-border-strong, --ui-border-subtle, --ui-danger, --ui-faint, --ui-fg, --ui-fg2, --ui-mono, --ui-muted and --ui-surface.

Notes

Shows a built-in ground floor (600 by 360 plan units) with three access points, AP Lab offline, and 14 clients. No attribute selects another plan; 5 GHz is selected on load.
Coverage radius depends on the band: 2.4 GHz reaches furthest and 6 GHz the least.
The stage keeps a 600:360 aspect ratio and fills its container's width.

<ln-ap>

Access pointln-ap

<ln-spectrum>

Channel scanln-spectrum

<ln-topology>

Topology editorln-topology

<ln-device-card>

Device cardln-device-card

Was this page helpful?

Related