# WAN failover
> Two WAN uplinks and the failover between them: the active link carries traffic pixels, the standby waits on a dashed line.
- Element: `<ln-wan>`
- React: `import { LnWan } from "@/components/lumesec/ln-wan"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-wan.json
- Page: https://elements.lumesec.ai/components/network/wan



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

```html
<ln-wan></ln-wan>
```

## Installation

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

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

## Usage

React:

```tsx
import { LnWan } from "@/components/lumesec/ln-wan";

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

HTML:

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

<ln-wan></ln-wan>
```

## Behaviour

Two uplinks and the failover between them. The active link carries the traffic; the standby link waits on a dashed line.

## API reference

### Events

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

| Event      | React prop   | Detail                         | Description                                                                                                                      |
| ---------- | ------------ | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| `failover` | `onFailover` | `{ active: "wan1" \| "wan2" }` | Fires when traffic has moved: to `wan2` 2.4 s after an outage is simulated, back to `wan1` 1.8 s after Restore WAN 1 is pressed. |

## Accessibility

* Simulate outage and Restore WAN 1 are one native button whose label changes; it is disabled while a switch is in progress.
* The status line under the stats is `aria-live="polite"` and announces each step.
* The link canvas is `aria-hidden`; each uplink's state (Active, Standby, Down) is text.
* Reduced motion: traffic pixels are not drawn, the links are redrawn once after each change, and failover and restore complete after 50 ms instead of 2.4 s and 1.8 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 `--border`, `--card`, `--destructive`, `--foreground`, `--lumesec`, `--muted` and `--muted-foreground`.

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

## Notes

* Shows the built-in WAN 1 (fibre) and WAN 2 (LTE) uplinks of the demo site; no attribute selects other links. Rates and latency are simulated and update every second while the element is on screen.