# Events
> Live network event log with severity filters; Pause holds the list, and selecting an event shows its ID, device and time.
- Element: `<ln-events>`
- React: `import { LnEvents } from "@/components/lumesec/ln-events"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-events.json
- Page: https://elements.lumesec.ai/components/network/events



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

```html
<ln-events></ln-events>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-events
```

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-events.json
```

## Usage

React:

```tsx
import { LnEvents } from "@/components/lumesec/ln-events";

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

HTML:

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

<ln-events></ln-events>
```

## Behaviour

Live event log with severity filters. Pause holds the list while you read; select an event for its ID and device.

## API reference

### Events

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

| Event   | React prop | Detail                                                                                                        | Description                                                                                                                                                            |
| ------- | ---------- | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `event` | `onEvent`  | `{ sev: "info" \| "warn" \| "sec", ic: string, m: string, d: string, t: string, id: string, fresh: boolean }` | Fires for each new event, every 2.6 s unless paused. `m` is the message, `d` the device, `t` the time (HH:MM:SS) and `id` the event ID; `ic` and `fresh` are internal. |

## Accessibility

* The list has `role="log"` with `aria-live="off"`, so new events are not announced.
* Each event is a button with `aria-expanded` that shows or hides its details.
* The filter is a `role="group"` labelled Filter. Pause is a toggle with `aria-pressed` whose label changes to Resume.
* The list re-renders on every new event; keyboard focus stays on the focused event while it is still among the seven shown.
* Reduced motion: colour transitions are removed and new rows appear without sliding in.

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

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-border-subtle`, `--ui-danger`, `--ui-mono`, `--ui-muted`, `--ui-track` and `--ui-warn`.

## Notes

* Events are picked at random from a built-in pool of 13 demo messages, never the same message twice in a row; no attribute supplies events. The log keeps 40 events and shows the latest 7 that match the filter.
* While paused, no events are generated and `event` does not fire.
* Uses a container query: below 460px the device column hides.