WAN failover
Two WAN uplinks and the failover between them: the active link carries traffic pixels, the standby waits on a dashed line.
Installation
pnpm dlx shadcn@latest add @lumesec/ln-wanFirst 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}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/ln-wan.jsonUsage
import { LnWan } from "@/components/lumesec/ln-wan";
export function Example() {
return (
<LnWan />
);
}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.
failoverReact proponFailoverDetail{ 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.
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.
Related
Was this page helpful?