Rack

Installation#

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

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/ln-rack.json

Usage#

import { LnRack } from "@/components/lumesec/ln-rack";

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

Behaviour#

Rack elevation with each device in its units. The port strip on each faceplate carries that device’s traffic. Totals cover power, space and temperature.

API reference#

Events#

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

Accessibility#

• Each mounted item is a button with aria-pressed; its name and model form the accessible name.
• The detail panel is aria-live="polite" and refreshes every 1.3 s, re-rendering its Locate button; keyboard focus on Locate is kept.
• Empty units and the traffic canvas are aria-hidden.
• Reduced motion: traffic pixels on the faceplates are not drawn, and the Locate LED stays lit for 4 s instead of blinking.

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

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

Notes#

• Shows a built-in 16U rack (Rack A1) filled from the shared demo devices plus a patch panel and a UPS. No attribute selects other equipment; traffic, power and temperature are simulated every 1.3 s while the element is on screen.
• Uses a container query: below 480px the detail panel moves under the rack.