# Health checks
> Health checks of demo services with probe, interval, latency and the last 30 results. New results slide in from the right.
- Element: `<sv-health>`
- React: `import { SvHealth } from "@/components/lumesec/sv-health"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-health.json
- Page: https://elements.lumesec.ai/components/service-map/health



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

```html
<sv-health></sv-health>
```

## Installation

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

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

## Usage

React:

```tsx
import { SvHealth } from "@/components/lumesec/sv-health";

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

HTML:

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

<sv-health></sv-health>
```

## Behaviour

Each check with its probe, interval and the last 30 results. New results slide in from the right.

## API reference

### Events

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

| Event   | React prop | Detail                | Description                                                                                                       |
| ------- | ---------- | --------------------- | ----------------------------------------------------------------------------------------------------------------- |
| `check` | `onCheck`  | `{ service: string }` | Fires when a Run check button is pressed. `service` is the display name, so both AIOP API rows report `AIOP API`. |

## Accessibility

* Checks are a `role="list"`. Each result strip is `role="img"` with an `aria-label` that counts the passed results out of the last 30.
* Each run button has an `aria-label` that names the service, for example Run Redis check now.
* The passing and degraded summary is a polite live region.
* Reduced motion: the newest result appears without the accent flash and scale. Checks still run every second.

## 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`, `--card`, `--destructive`, `--foreground`, `--lumesec`, `--lumesec-success`, `--lumesec-warning` and `--muted-foreground`.

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

## Notes

* Built-in demo data: seven checks (AIOP API on app-01 and app-02, PostgreSQL, Redis, Identity, Inference, Loki). No attribute selects a record.
* Results are simulated: Inference degrades when its latency passes 1.5 s, the other checks fail at random about 1.5% of the time.
* Container query: under 440 px the result strip moves to its own line.