# VPN tunnels
> Site-to-site VPN tunnels with protocol, rates, latency and uptime; switching a tunnel off drains its traffic at once.
- Element: `<ln-vpn>`
- React: `import { LnVpn } from "@/components/lumesec/ln-vpn"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-vpn.json
- Page: https://elements.lumesec.ai/components/network/vpn



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

```html
<ln-vpn></ln-vpn>
```

## Installation

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

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

## Usage

React:

```tsx
import { LnVpn } from "@/components/lumesec/ln-vpn";

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

HTML:

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

<ln-vpn></ln-vpn>
```

## Behaviour

Site-to-site tunnels with protocol, rates, latency and uptime. Switching a tunnel off drains its traffic.

## API reference

### Events

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

| Event    | React prop | Detail                          | Description                                                                                                                                     |
| -------- | ---------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `tunnel` | `onTunnel` | `{ site: string, up: boolean }` | Fires with `up: false` as soon as a tunnel is switched off, and with `up: true` when a tunnel switched on has finished key negotiation (1.8 s). |

## Accessibility

* Each tunnel has a `role="switch"` button with `aria-checked` and an `aria-label` such as "Tunnel to Vienna Office".
* Tunnel state (Up, Negotiating keys…, Down) and rates are text; there is no live region.
* The tunnel canvas is `aria-hidden`.
* Reduced motion: traffic pixels are not drawn, the dashed line during key negotiation does not move, the links are redrawn once after each change, and a tunnel comes up after 50 ms instead of 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 `--background`, `--border`, `--foreground`, `--lumesec`, `--lumesec-success`, `--lumesec-warning` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-faint`, `--ui-fg`, `--ui-fg2`, `--ui-mono`, `--ui-muted`, `--ui-ok` and `--ui-warn`.

## Notes

* Shows three built-in tunnels: Frankfurt DC (IPsec), Vienna Office (WireGuard) and Zurich · Partner (IPsec, off). No attribute selects other tunnels; rates are simulated and update every second while the element is on screen.