# Clients
> Connected clients with signal, band, access point and live rates, sorted by usage or name, with Block and Unblock per client.
- Element: `<ln-client-list>`
- React: `import { LnClientList } from "@/components/lumesec/ln-client-list"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-client-list.json
- Page: https://elements.lumesec.ai/components/network/client-list



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

```html
<ln-client-list></ln-client-list>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-client-list
```

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

## Usage

React:

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

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

HTML:

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

<ln-client-list></ln-client-list>
```

## 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.

| Event   | React prop | Detail                                 | Description                                                                                      |
| ------- | ---------- | -------------------------------------- | ------------------------------------------------------------------------------------------------ |
| `block` | `onBlock`  | `{ 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](/docs/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.