Skip to content
NewService Map: 30 components for hosts, ports and routes
<ln-poe>Custom elementDevicesFree

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.

View as Markdown
<ln-poe>

Trysimulate the 60 W load.

Installation

pnpm dlx shadcn@latest add @lumesec/ln-poe
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-poe.json

Usage

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

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

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.

cycleReact proponCycleDetail{ port: number }

Fires when a power-cycled port draws power again, 2.6 s after its button is pressed.

shedReact proponShedDetail{ 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.

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.

Related

<ln-device-card>
Device cardln-device-cardOpen Device card
<ln-device-list>
Device listln-device-listOpen Device list
<ln-client-list>
Clientsln-client-listOpen Clients
<ln-port-panel>
Switch portsln-port-panelOpen Switch ports

Was this page helpful?