# Overview
> Incoming requests per second as a large headline beside a dotted 60-second chart, over tiles for hosts, services, ports, routes and certificates.
- Element: `<sv-overview>`
- React: `import { SvOverview } from "@/components/lumesec/sv-overview"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-overview.json
- Page: https://elements.lumesec.ai/components/service-map/overview



Live preview: https://elements.lumesec.ai/view/sv-overview

```html
<sv-overview></sv-overview>
```

## Installation

```bash
npx shadcn@latest add @lumesec/sv-overview
```

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/sv-overview.json
```

## Usage

React:

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

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

HTML:

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

<sv-overview></sv-overview>
```

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