VPN tunnels

Site-to-site VPN tunnels with protocol, rates, latency and uptime; switching a tunnel off drains its traffic at once.

<ln-vpn>· loading

Tryswitch off the Vienna tunnel.

Installation

pnpm dlx shadcn@latest add @lumesec/ln-vpn

First 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}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/ln-vpn.json

Usage

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

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

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.

tunnelReact proponTunnelDetail{ 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.

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.

<ln-wan>

WAN failoverln-wan

<ln-sites>

Sitesln-sites

<ln-topology>

Topology editorln-topology

<ln-device-card>

Device cardln-device-card

Was this page helpful?

Related