Skip to content
NewService Map: 30 components for hosts, ports and routes
<ln-device-card>Custom elementDevicesFree

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.

View as Markdown
<ln-device-card>

Trypress Restart.

Playground

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

Loading <ln-device-card>
Props
deviceremounts
<LnDeviceCard device="aiop1" />

Installation

pnpm dlx shadcn@latest add @lumesec/ln-device-card
First 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}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/ln-device-card.json

Usage

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

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

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

deviceReact propdeviceTypestringDefaultgw

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.

locateReact proponLocateDetail{ device: string }

Fires when Locate is pressed. The card also flashes a ring twice.

openReact proponOpenDetail{ device: string }

Fires when Open is pressed. The card does not navigate on its own.

restartReact proponRestartDetail{ device: string }

Fires when a restart begins. Restart only acts while the device is online.

restartedReact proponRestartedDetail{ 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.

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.

Related

<ln-device-list>
Device listln-device-listOpen Device list
<ln-client-list>
Clientsln-client-listOpen Clients
<ln-port-panel>
Switch portsln-port-panelOpen Switch ports
<ln-link>
Linkln-linkOpen Link

Was this page helpful?