VLANs and DHCP

Networks with VLAN ID, subnet, DHCP range and lease usage; each row opens an inline editor that validates IDs, subnets and ranges.

View as Markdown

<ln-vlans>· loading

Trycreate a network with VLAN 20.

Installation

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

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-vlans.json

Usage

import { LnVlans } from "@/components/lumesec/ln-vlans";

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

Behaviour

Networks with VLAN ID, subnet, DHCP range and lease usage. Edit a row in place; IDs, subnets and ranges are checked before saving.

API reference

Events

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

changeReact proponChangeDetail

{ action: "create" | "update", network: { n: string, v: number, net: string, dhcp: boolean, lo: number, hi: number, used: number, iso: boolean } } | { action: "delete", vlan: number }

Fires when a network is created, saved or deleted. In network, n is the name, v the VLAN ID, net the subnet, lo and hi the DHCP range, used the active leases and iso client isolation.

Keyboard

Keys	Action
Enter	In an editor field: save the network.
Escape	While a row is open: cancel editing and discard an unsaved new network.

Accessibility

Rows are buttons with aria-expanded. The editor is a role="group" labelled "Edit …" with the network name.
Fields have visible labels. DHCP server and Isolate clients are role="switch" buttons with aria-checked.
On a validation error the field gets aria-invalid="true" and focus, and the message is written to an aria-live="assertive" region.
Saves and deletions are announced in a polite live region. After save or cancel, focus returns to the row.
Reduced motion: the row and chevron transitions are removed; there is no other animation.

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, --card, --destructive, --foreground, --input, --muted and --muted-foreground.

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

Notes

Starts with six built-in demo networks. No attribute loads other data; lease counts are simulated and change every 2.2 s while the element is on screen. Changes are not persisted.
Validation: a name of 1 to 24 characters; a unique VLAN ID from 1 to 4094; a subnet in CIDR form with a prefix from /16 to /30; with DHCP on, a range that starts at 2 or higher, ends above its start and fits the subnet.
Create network adds one draft at a time with the next free VLAN ID from 70 upward in steps of 10. VLAN 1 (Management) cannot be deleted.
Uses a container query: below 500px the lease and isolation columns hide.

<ln-ip-pool>

Address mapln-ip-pool

<ln-topology>

Topology editorln-topology

<ln-device-card>

Device cardln-device-card

<ln-device-list>

Device listln-device-list

Was this page helpful?

Related