Channel scan
Channel scan per band showing each network by width and signal; one button moves your network to the channel with the least overlap.
Installation
pnpm dlx shadcn@latest add @lumesec/ln-spectrumFirst 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/ln-spectrum.jsonUsage
import { LnSpectrum } from "@/components/lumesec/ln-spectrum";
export function Example() {
return (
<LnSpectrum />
);
}Behaviour
Networks heard on each channel by width and signal. Hover a shape for its name; the button moves to the channel with the least overlap.
API reference
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
channelReact proponChannelDetail{ band: "2.4" | "5" | "6", channel: number }Fires after the network has moved to a cleaner channel. Not fired when the current channel is already the cleanest.
Accessibility
- The plot has
role="img"and anaria-labelthat names the band, the number of networks and the current channel; the SVG inside isaria-hidden. - Network names and details appear in a tooltip on pointer hover only.
- The band control is a
role="group"labelled Band witharia-pressedbuttons. The result line isaria-live="polite". - Find a cleaner channel is a native button, disabled while the move runs.
- Reduced motion: the move to a cleaner channel is instant instead of taking 0.9 s; neighbour shapes still shift by up to 1 px every 1.2 s.
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, --foreground, --input, --lumesec and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent-text, --ui-border-strong, --ui-border-subtle, --ui-faint, --ui-fg, --ui-fg2, --ui-mono, --ui-muted and --ui-surface.
Notes
- Shows built-in scan data for 2.4, 5 and 6 GHz; your network is LumeSec Staff. No attribute selects other data; 5 GHz is selected on load.
- Candidates are channels 1, 6 and 11 on 2.4 GHz and fixed lists on 5 and 6 GHz. Overlap is weighted by each neighbour's signal strength. Switching band resets the network to its default channel.
- The plot is 190 px tall and redraws when the element is resized.
Related
Was this page helpful?