# Network health
> One health score for the site from five areas, with the issues that cost the most points; resolving an issue raises the score.
- Element: `<ln-health>`
- React: `import { LnHealth } from "@/components/lumesec/ln-health"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-health.json
- Page: https://elements.lumesec.ai/components/network/health



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

```html
<ln-health></ln-health>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-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/ln-health.json
```

## Usage

React:

```tsx
import { LnHealth } from "@/components/lumesec/ln-health";

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

HTML:

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

<ln-health></ln-health>
```

## Behaviour

One score for the site from five areas, with the issues that cost the most points. Resolving an issue updates the score.

## API reference

### Events

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

| Event     | React prop  | Detail                             | Description                                                                                                 |
| --------- | ----------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| `resolve` | `onResolve` | `{ issue: string, score: number }` | Fires when an issue is resolved, about 1.7 s after its action is pressed. `score` is the new overall score. |

## Accessibility

* The score ring has `role="img"` and an `aria-label` such as "Health score 89 of 100".
* Each issue has one native action button that reads Working… and is disabled while it runs. If that button had focus, focus moves to the action of the next issue when the issue disappears.
* Resolved issues are announced in a polite live region together with the new score.
* The traffic lane canvas is `aria-hidden`.
* Reduced motion: traffic pixels are not drawn, the score ring changes without transition, and a resolved issue disappears after 50 ms without fading.

## 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-warning`, `--muted` 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-surface`, `--ui-track` and `--ui-warn`.

## Notes

* Shows built-in demo data: five areas (Internet, Wi-Fi, Switching, Security, Sites) and three open issues. No attribute selects other data. The score is the rounded mean of the area scores.
* Uses a container query: below 470px the ring stacks above the area list.