Sites

Installation#

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

pnpm dlx 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#

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

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

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.

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.

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.