# 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.
- Element: `<ln-spectrum>`
- React: `import { LnSpectrum } from "@/components/lumesec/ln-spectrum"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-spectrum.json
- Page: https://elements.lumesec.ai/components/network/spectrum



Live preview: https://elements.lumesec.ai/view/ln-spectrum

```html
<ln-spectrum></ln-spectrum>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-spectrum
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/ln-spectrum.json
```

## Usage

React:

```tsx
import { LnSpectrum } from "@/components/lumesec/ln-spectrum";

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

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/ln-spectrum.js"></script>

<ln-spectrum></ln-spectrum>
```

## 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.

| Event     | React prop  | Detail                                           | Description                                                                                                         |
| --------- | ----------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
| `channel` | `onChannel` | `{ 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 an `aria-label` that names the band, the number of networks and the current channel; the SVG inside is `aria-hidden`.
* Network names and details appear in a tooltip on pointer hover only.
* The band control is a `role="group"` labelled Band with `aria-pressed` buttons. The result line is `aria-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](/docs/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.