# 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.
- Element: `<ln-port-panel>`
- React: `import { LnPortPanel } from "@/components/lumesec/ln-port-panel"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-port-panel.json
- Page: https://elements.lumesec.ai/components/network/port-panel



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

```html
<ln-port-panel></ln-port-panel>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-port-panel
```

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

## Usage

React:

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

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

HTML:

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

<ln-port-panel></ln-port-panel>
```

## 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.

| Event        | React prop     | Detail                               | Description                                                                                                |
| ------------ | -------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
| `port`       | `onPort`       | `{ port: number, enabled: boolean }` | Fires when Disable or Enable is pressed for the selected port. `enabled` is the new state.                 |
| `powercycle` | `onPowercycle` | `{ 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](/docs/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.