# Ping monitor
> Continuous latency probes to a chosen target with a 60-probe chart, average, p95, jitter and loss; lost probes show as red marks.
- Element: `<ln-ping>`
- React: `import { LnPing } from "@/components/lumesec/ln-ping"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-ping.json
- Page: https://elements.lumesec.ai/components/network/ping



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

```html
<ln-ping></ln-ping>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-ping
```

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

## Usage

React:

```tsx
import { LnPing } from "@/components/lumesec/ln-ping";

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

HTML:

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

<ln-ping></ln-ping>
```

## Behaviour

Continuous latency probes to a target. Lost probes show as red marks at the base of the chart.

## Accessibility

* The target is a native `select` labelled Target.
* The chart canvas has `role="img"` and `aria-label="Round-trip times for the last 60 probes"`; the probe lane canvas is `aria-hidden`.
* Average, p95, jitter and loss are text in a region with `aria-live="off"`, so updates are not announced.
* Reduced motion: the probe pixel on the lane is not drawn and CSS transitions are removed; the chart and statistics still update with every probe.

## 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` and `--muted-foreground`.

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

## Notes

* Targets are built in: Frankfurt DC (about 12.4 ms), 1.1.1.1 (about 9.1 ms) and AIOP API · Vienna (about 6.2 ms). Probes are simulated, one every 600 ms while the element is on screen; no attribute sets the target.
* Bars above 1.6 times the target's baseline use the warning colour; loss above 2% turns red. Changing the target reseeds the chart.