# Link
> One cable between two switch ports with speed, duplex, live rates in both directions and utilisation, plus a test of all four pairs.
- Element: `<ln-link>`
- React: `import { LnLink } from "@/components/lumesec/ln-link"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-link.json
- Page: https://elements.lumesec.ai/components/network/link



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

```html
<ln-link></ln-link>
```

## Installation

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

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

## Usage

React:

```tsx
import { LnLink } from "@/components/lumesec/ln-link";

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

HTML:

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

<ln-link></ln-link>
```

## Behaviour

A single cable between two ports with speed, duplex, utilisation and traffic in each direction. The cable test checks all four pairs.

## API reference

### Events

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

| Event       | React prop    | Detail            | Description                                                             |
| ----------- | ------------- | ----------------- | ----------------------------------------------------------------------- |
| `cabletest` | `onCabletest` | `{ ok: boolean }` | Fires when the cable test finishes. The demo always reports `ok: true`. |

## Accessibility

* Run cable test is a native button, disabled while the test runs.
* The test status line is `aria-live="polite"` and announces the start and the result.
* The cable canvas is `aria-hidden`; rates and utilisation are text.
* Reduced motion: traffic pixels on the cable are not drawn, and the test fills in all four pairs after 10 ms instead of over about 1.9 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 `--border`, `--card`, `--foreground`, `--lumesec`, `--lumesec-success`, `--muted` and `--muted-foreground`.

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

## Notes

* Shows a fixed demo link (Core Switch port 26 to Server Switch port 1, 10 Gb/s over a 3 m DAC). No attribute selects another link; rates are simulated and update every second while the element is on screen.
* Utilisation is the busier direction as a share of 10 Gb/s.