# Rack
> Rack elevation with each device in its units and its traffic on the faceplate port strip, plus totals for power, space and temperature.
- Element: `<ln-rack>`
- React: `import { LnRack } from "@/components/lumesec/ln-rack"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-rack.json
- Page: https://elements.lumesec.ai/components/network/rack



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

```html
<ln-rack></ln-rack>
```

## Installation

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

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

## Usage

React:

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

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

HTML:

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

<ln-rack></ln-rack>
```

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

| Event    | React prop | Detail               | Description                                                                                                                           |
| -------- | ---------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `locate` | `onLocate` | `{ device: string }` | Fires when Locate is pressed for the selected device. `device` is the device id from the demo network. The device LED blinks for 4 s. |

## 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](/docs/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.