Clients

Connected clients with signal, band, access point and live rates, sorted by usage or name, with Block and Unblock per client.

View as Markdown

<ln-client-list>· loading

Tryblock a client.

Installation

pnpm dlx shadcn@latest add @lumesec/ln-client-list

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-client-list.json

Usage

import { LnClientList } from "@/components/lumesec/ln-client-list";

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

Behaviour

Connected clients with signal, band, network and current rate. Block removes a client from the network until it is unblocked.

API reference

Events

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

blockReact proponBlockDetail{ client: string, blocked: boolean }

Fires when Block or Unblock is pressed. client is the client name; blocked is the new state.

Accessibility

The sort control is a role="group" labelled Sort with aria-pressed buttons.
Each Block button has an aria-label such as "Block Office Printer" or "Unblock Office Printer"; focus returns to it after it is pressed.
The list re-renders every 1.2 s; keyboard focus stays on the focused Block button.
Signal bars are aria-hidden SVG; the band name is text next to them.
Reduced motion: the list has no animation; reduced motion only removes CSS transitions.

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, --destructive, --foreground, --lumesec-success, --lumesec-warning, --muted and --muted-foreground.

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

Notes

Shows eight built-in demo clients. No attribute selects other data; rates are simulated and refresh every 1.2 s while the element is on screen.
Blocking is local to the element: the client stays in the list, struck through, and the connected count drops.
Uses a container query: below 470px the signal column hides.

<ln-device-card>

Device cardln-device-card

<ln-device-list>

Device listln-device-list

<ln-port-panel>

Switch portsln-port-panel

<ln-link>

Linkln-link

Was this page helpful?

Related