# Path
> Traceroute from the site to a destination, hop by hop, with the latency added at each hop; it traces on load and again on request.
- Element: `<ln-path>`
- React: `import { LnPath } from "@/components/lumesec/ln-path"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-path.json
- Page: https://elements.lumesec.ai/components/network/path



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

```html
<ln-path></ln-path>
```

## Installation

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

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

## Usage

React:

```tsx
import { LnPath } from "@/components/lumesec/ln-path";

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

HTML:

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

<ln-path></ln-path>
```

## Behaviour

Traceroute from the site to a destination, hop by hop, with the latency added at each hop.

## API reference

### Events

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

| Event   | React prop | Detail             | Description                                                                |
| ------- | ---------- | ------------------ | -------------------------------------------------------------------------- |
| `trace` | `onTrace`  | `{ hops: number }` | Fires when a trace finishes. `hops` is the number of hops (6 in the demo). |

### Methods

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

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

## Accessibility

* The hop list is an ordered list with `aria-live="polite"`; each hop's name, address and latency are text.
* Trace again is a native button, disabled during a trace.
* The hop marker canvas is `aria-hidden`.
* Reduced motion: the marker jumps between hops instead of travelling, and each hop appears after 20 ms instead of 380 ms.

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

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

## Notes

* Shows a fixed demo path from Innsbruck HQ to an AIOP node in Frankfurt (6 hops); latencies are simulated with about 8% variation. No attribute selects the destination.
* The first trace starts 600 ms after the element is first connected.
* The React wrapper's `ref` is typed as the element class, so its methods can be called once the element is connected.