Switch ports

Front panel of a 24-port PoE switch with two SFP+ cages and blinking activity LEDs; select a port for its device, speed and PoE draw.

View as Markdown

<ln-port-panel>· loading

Tryselect port 3.

Installation

pnpm dlx shadcn@latest add @lumesec/ln-port-panel

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-port-panel.json

Usage

import { LnPortPanel } from "@/components/lumesec/ln-port-panel";

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

Behaviour

The front of a 24-port switch with two SFP+ cages. Port LEDs blink with activity. Select a port for its device, speed and PoE draw, or to disable or power-cycle it.

API reference

Events

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

portReact proponPortDetail{ port: number, enabled: boolean }

Fires when Disable or Enable is pressed for the selected port. enabled is the new state.

powercycleReact proponPowercycleDetail{ port: number }

Fires when Power-cycle is pressed. PoE power is off for 1.8 s. Only ports that draw PoE offer this action.

Keyboard

Keys	Action
ArrowLeft / ArrowRight	On a port: move to the port two numbers lower or higher (the neighbouring column) and select it.
ArrowUp / ArrowDown	On a port: move to the port one number lower or higher (the other row) and select it.

Accessibility

Ports are buttons inside an element with role="group" and aria-label="Switch ports"; the selected port has aria-pressed="true".
Each port's aria-label gives its number and connected device with link speed, or "link down" or "empty".
The details panel below the face is aria-live="polite".
After Disable, Enable or Power-cycle the port button is rebuilt and focused, and keeps its arrow-key handling. When PoE power returns 1.8 s after a power cycle, the button is rebuilt again and keeps focus only if it still had it; focus is not taken from elsewhere.
Reduced motion: cSS transitions are removed; the activity LEDs keep blinking because a timer drives them.

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, --foreground, --input, --lumesec-success, --lumesec-warning, --muted and --muted-foreground.

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

Notes

Shows the built-in Core Switch (SW-24 PoE) demo: 16 ports with a connected device, port 5 with its link down, and a 400 W PoE budget. No attribute selects other data.
Port 3 is selected on load. Activity LEDs update every 160 ms while the element is on screen.
The face scrolls horizontally when its container is narrower than the panel.

<ln-device-card>

Device cardln-device-card

<ln-device-list>

Device listln-device-list

<ln-client-list>

Clientsln-client-list

<ln-link>

Linkln-link

Was this page helpful?

Related