Overview

Installation#

pnpm dlx shadcn@latest add @lumesec/sv-overview

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

npx shadcn@latest add https://elements.lumesec.ai/r/sv-overview.json

Usage#

import { SvOverview } from "@/components/lumesec/sv-overview";

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

Behaviour#

Incoming requests per second as the headline, with hosts, services, open ports, routes and certificates underneath.

Accessibility#

• The headline rate and its req/s unit are text, so screen readers read the current value. It is not a live region, as it changes every second.
• The chart canvas is aria-hidden="true"; it shows the same rate over the last 60 s.
• The tiles are plain text.
• Reduced motion: the headline jumps to each new value instead of counting toward it.

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

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-fg, --ui-mono, --ui-muted and --ui-warn.

Notes#

• Demo data: the rate is simulated around 1,820 req/s. The title and the Services, Open ports, Routes and Certificates tiles are fixed text for Innsbruck HQ · Production; the Hosts tile counts the demo hosts in INFRA (9: 3 physical, 6 virtual). No attribute selects a record.
• Container query: the tiles wrap to two columns under 520 px. The headline scales between 32 and 52 px with the element width and takes the left 42 % of the chart row (half of it below 430 px).