Adoption
Devices waiting for adoption; each runs identity check, configuration and firmware while its lane shows data flowing to the device.
Installation
pnpm dlx shadcn@latest add @lumesec/ln-adoptFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/ln-adopt.jsonUsage
import { LnAdopt } from "@/components/lumesec/ln-adopt";
export function Example() {
return (
<LnAdopt />
);
}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.
adoptReact proponAdoptDetail{ 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.
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.
Related
Was this page helpful?