# Adoption
> Devices waiting for adoption; each runs identity check, configuration and firmware while its lane shows data flowing to the device.
- Element: `<ln-adopt>`
- React: `import { LnAdopt } from "@/components/lumesec/ln-adopt"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-adopt.json
- Page: https://elements.lumesec.ai/components/network/adopt



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

```html
<ln-adopt></ln-adopt>
```

## Installation

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

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

## Usage

React:

```tsx
import { LnAdopt } from "@/components/lumesec/ln-adopt";

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

HTML:

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

<ln-adopt></ln-adopt>
```

## Behaviour

Devices the gateway discovered that are waiting for configuration. Adoption runs identity check, configuration and firmware; the lane shows data going to the device.

## API reference

### Events

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

| Event   | React prop | Detail                                                         | Description                                                                                                                           |
| ------- | ---------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `adopt` | `onAdopt`  | `{ mac: string, state: "started" \| "online", name?: string }` | Fires with `state: "started"` when adoption begins, and with `state: "online"` and the new `name` when it finishes about 4.8 s later. |

## Accessibility

* Adopt, Ignore and Adopt all are native buttons. Ignore changes to Restore and disables Adopt.
* A finished adoption is announced in a polite live region ("… adopted").
* Step progress is visual only, and the Adopt and Ignore buttons are hidden while a device adopts.
* The lane canvases are `aria-hidden`.
* Reduced motion: traffic pixels are not drawn and each adoption step takes 20 ms instead of 0.7 to 1.8 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`, `--lumesec-success`, `--muted` and `--muted-foreground`.

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

## Notes

* Shows three built-in discovered devices (a switch, an access point and a camera). No attribute supplies devices; adoption is simulated and gives each device its site name.
* Adopt all starts every device that is neither ignored nor adopted, 400 ms apart.
* Uses a container query: below 480px the lanes and step labels hide.