# Speed test
> Speed test that measures latency, then download and upload against a test server, and keeps the three latest results for comparison.
- Element: `<ln-speedtest>`
- React: `import { LnSpeedtest } from "@/components/lumesec/ln-speedtest"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-speedtest.json
- Page: https://elements.lumesec.ai/components/network/speedtest



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

```html
<ln-speedtest></ln-speedtest>
```

## Installation

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

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

## Usage

React:

```tsx
import { LnSpeedtest } from "@/components/lumesec/ln-speedtest";

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

HTML:

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

<ln-speedtest></ln-speedtest>
```

## Behaviour

Latency first, then download and upload against a test server. Results are kept for comparison.

## API reference

### Events

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

| Event    | React prop | Detail                                       | Description                                                              |
| -------- | ---------- | -------------------------------------------- | ------------------------------------------------------------------------ |
| `result` | `onResult` | `{ ping: number, down: number, up: number }` | Fires when a run finishes. `ping` is in ms; `down` and `up` are in Mb/s. |

### Methods

Call them on the element, for example through a React ref.

| Method  | Description                                                                                                                                   |
| ------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `run()` | Runs a test and returns a promise that resolves when it finishes. Same as Run test. Calling it during a run starts a second, overlapping run. |

## Accessibility

* Run test is a native button, disabled while a test runs.
* The phase line (Measuring latency, Testing download, Testing upload, Done) is `aria-live="polite"`.
* The large figure changes many times per second during a run and is not a live region.
* The traffic lane canvas is `aria-hidden`.
* Reduced motion: traffic pixels are not drawn and each measurement step waits 20 ms, so a run takes about 1.4 s instead of about 6 s.

## 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 `--background`, `--border`, `--card`, `--foreground`, `--lumesec`, `--muted` and `--muted-foreground`.

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

## Notes

* Results are simulated against a fixed Vienna test server (about 7 to 9 ms ping, 930 to 950 Mb/s down, 905 to 925 Mb/s up); nothing is measured over the network. Two earlier results are shown on load.
* The React wrapper's `ref` is typed as the element class, so its methods can be called once the element is connected.