# PoE budget
> PoE draw per port against the switch budget; when demand exceeds it, low-priority ports are shed first so critical devices keep power.
- Element: `<ln-poe>`
- React: `import { LnPoe } from "@/components/lumesec/ln-poe"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-poe.json
- Page: https://elements.lumesec.ai/components/network/poe



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

```html
<ln-poe></ln-poe>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-poe
```

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-poe.json
```

## Usage

React:

```tsx
import { LnPoe } from "@/components/lumesec/ln-poe";

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

HTML:

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

<ln-poe></ln-poe>
```

## Behaviour

Power per port against the switch budget. When demand exceeds it, low-priority ports are shed first, so access points, the camera and the door controller keep power.

## API reference

### Events

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

| Event   | React prop | Detail                | Description                                                                                                            |
| ------- | ---------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `cycle` | `onCycle`  | `{ port: number }`    | Fires when a power-cycled port draws power again, 2.6 s after its button is pressed.                                   |
| `shed`  | `onShed`   | `{ ports: number[] }` | Fires once when the simulated load pushes demand over the budget. `ports` are the port numbers that were switched off. |

## Accessibility

* The port table uses `role="table"` with `aria-label="Powered ports"`, and `row` and `cell` roles.
* Each power-cycle button has an `aria-label` such as "Power-cycle port 4".
* Simulate 60 W load is a toggle with `aria-pressed`.
* Status messages are written to an `aria-live="polite"` line. The budget bar is `aria-hidden`; total draw and headroom are text.
* Reduced motion: bar transitions are removed, the power-cycle icon does not spin, and a power-cycle completes after 50 ms instead of 2.6 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](/docs/theming).

This component reads `--background`, `--border`, `--destructive`, `--foreground`, `--lumesec-warning`, `--muted` and `--muted-foreground`.

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

## Notes

* Shows nine built-in ports on the Core Switch with a 150 W budget. No attribute selects other ports; draw is simulated and varies every 1.5 s while the element is on screen.
* Shedding order is Low, then Normal; High priority ports are never shed. Port 3 (AP Lab) has no link and cannot be power-cycled.
* Uses a container query: below 470px the class and priority columns hide.