# Device card
> Card for one network device with live rates on its uplink, a rate sparkline, CPU and memory, and a Restart that shows its progress.
- Element: `<ln-device-card>`
- React: `import { LnDeviceCard } from "@/components/lumesec/ln-device-card"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-device-card.json
- Page: https://elements.lumesec.ai/components/network/device-card



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

```html
<ln-device-card device="aiop1"></ln-device-card>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/ln-device-card
```

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-device-card.json
```

## Usage

React:

```tsx
import { LnDeviceCard } from "@/components/lumesec/ln-device-card";

export function Example() {
  return (
    <LnDeviceCard device="aiop1" />
  );
}
```

HTML:

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

<ln-device-card device="aiop1"></ln-device-card>
```

## Behaviour

One device and its uplink: live rates both ways, a 60-second sparkline, CPU and memory, and a restart that reports its progress.

## API reference

### Attributes

| Attribute | React prop | Type     | Default | Description                                                                                                                                                                                                                                    |
| --------- | ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `device`  | `device`   | `string` | `gw`    | Id of a device in the built-in demo network: `wan1`, `wan2`, `gw`, `core`, `srv`, `aiop1`, `aiop2`, `gpu`, `nas`, `ap1`, `ap2`, `ap3` or `cam`. Unknown ids fall back to `gw`. Read once when the element connects; later changes are ignored. |

### Events

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

| Event       | React prop    | Detail               | Description                                                                             |
| ----------- | ------------- | -------------------- | --------------------------------------------------------------------------------------- |
| `locate`    | `onLocate`    | `{ device: string }` | Fires when Locate is pressed. The card also flashes a ring twice.                       |
| `open`      | `onOpen`      | `{ device: string }` | Fires when Open is pressed. The card does not navigate on its own.                      |
| `restart`   | `onRestart`   | `{ device: string }` | Fires when a restart begins. Restart only acts while the device is online.              |
| `restarted` | `onRestarted` | `{ device: string }` | Fires when the restart completes, about 2.8 s later, and uptime starts again from zero. |

## Accessibility

* Locate, Restart and Open are native `button` elements. Restart is disabled while a restart runs.
* The uplink canvas and the sparkline are `aria-hidden`; rates, details, CPU and memory are text.
* There is no live region, so status changes are not announced.
* Reduced motion: traffic pixels on the uplink are not drawn, the status pulse stops, and restart progress completes in 0.3 s instead of 2.8 s; the Locate flash still plays.

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

## Notes

* Shows one record from the built-in demo network, selected with `device` (for example `device="aiop1"`). Rates are simulated and update every second while the element is on screen.
* To show another device, render a new element (in React, change its `key`), because `device` is not observed.
* The internet uplink records (`wan1`, `wan2`) carry no MAC, firmware, CPU, memory or uptime values; the card shows a dash for each.