# Sites
> Every site around headquarters; each link shows health as solid, dashed or red, and selecting a site shows its rates and state.
- Element: `<ln-sites>`
- React: `import { LnSites } from "@/components/lumesec/ln-sites"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-sites.json
- Page: https://elements.lumesec.ai/components/network/sites



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

```html
<ln-sites></ln-sites>
```

## Installation

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

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

## Usage

React:

```tsx
import { LnSites } from "@/components/lumesec/ln-sites";

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

HTML:

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

<ln-sites></ln-sites>
```

## Behaviour

Every location around headquarters. The line shows health: solid when healthy, dashed when degraded, red when unreachable.

## API reference

### Events

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

| Event  | React prop | Detail             | Description                                                                               |
| ------ | ---------- | ------------------ | ----------------------------------------------------------------------------------------- |
| `open` | `onOpen`   | `{ site: string }` | Fires when Open site is pressed for the selected site. Selecting a site does not fire it. |

## Accessibility

* Sites are buttons with `aria-pressed` and an `aria-label` with name, status, device count and client count.
* The detail line is `aria-live="polite"` and refreshes every 1.1 s; the Open site button inside it is re-rendered on each refresh and keeps keyboard focus.
* The link canvas is `aria-hidden`; each site's status is also text.
* Reduced motion: traffic pixels on the site links are not drawn; the line styles still show health.

## 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`, `--muted` and `--muted-foreground`.

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

## Notes

* Shows four built-in sites around Innsbruck HQ: Frankfurt DC, Vienna Office, Zurich Partner (unreachable) and Munich Lab (degraded). No attribute selects other sites; rates and latency are simulated every 1.1 s while the element is on screen.
* Uses a container query: below 480px the sites sit in two columns above and below headquarters.