# Access point
> One access point's three radios: clients sit on a ring per band, and each bar splits airtime between this AP and its neighbours.
- Element: `<ln-ap>`
- React: `import { LnAp } from "@/components/lumesec/ln-ap"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-ap.json
- Page: https://elements.lumesec.ai/components/network/ap



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

```html
<ln-ap></ln-ap>
```

## Installation

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

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-ap.json
```

## Usage

React:

```tsx
import { LnAp } from "@/components/lumesec/ln-ap";

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

HTML:

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

<ln-ap></ln-ap>
```

## Behaviour

One access point’s three radios. Clients sit on a ring per band; each bar splits airtime between this access point and its neighbours.

## API reference

### Events

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

| Event  | React prop | Detail                                      | Description                     |
| ------ | ---------- | ------------------------------------------- | ------------------------------- |
| `band` | `onBand`   | `{ band: "6 GHz" \| "5 GHz" \| "2.4 GHz" }` | Fires when a radio is selected. |

## Accessibility

* The access point switcher is a `role="group"` labelled Access point; the radio list is a `role="group"` labelled Radios.
* Each radio is a button with `aria-pressed` and an `aria-label` that gives band, channel, client count and this access point's airtime share.
* Selecting a radio re-renders the radio buttons and returns focus to the pressed one.
* The client ring canvas is `aria-hidden`.
* Reduced motion: client traffic pixels are not drawn, the rings are redrawn once after an access point or radio change, and the airtime bars change without transition.

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

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

## Notes

* Shows two built-in access points (AP Office, AP Lobby) with channel, width, power and client data. No attribute selects the access point; airtime is simulated and updates every 1.5 s while the element is on screen.
* Switching the access point does not fire an event. 5 GHz is selected on load.
* Uses a container query: below 470px the rings stack above the radio list.