# Intrusion prevention
> Intrusion detections at the gateway by source; depending on the mode, attempts stop at the shield or are logged and let through.
- Element: `<ln-threats>`
- React: `import { LnThreats } from "@/components/lumesec/ln-threats"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-threats.json
- Page: https://elements.lumesec.ai/components/network/threats



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

```html
<ln-threats></ln-threats>
```

## Installation

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

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

## Usage

React:

```tsx
import { LnThreats } from "@/components/lumesec/ln-threats";

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

HTML:

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

<ln-threats></ln-threats>
```

## Behaviour

Detections at the gateway by source. Depending on the mode, attempts stop at the shield or are logged and let through.

## API reference

### Events

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

| Event  | React prop | Detail                                  | Description                                                        |
| ------ | ---------- | --------------------------------------- | ------------------------------------------------------------------ |
| `mode` | `onMode`   | `{ mode: "detect" \| "high" \| "all" }` | Fires when the mode changes: Detect only, Block high or Block all. |

## Accessibility

* The mode control is a `role="group"` labelled Mode with `aria-pressed` buttons.
* The table of recent detections is `aria-live="polite"` and updates every 1.1 s.
* Each detection shows Blocked or Logged as text; the canvas is `aria-hidden`.
* Reduced motion: traffic pixels and the red flash at the shield are not drawn.

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

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-border-strong`, `--ui-border-subtle`, `--ui-danger`, `--ui-fg`, `--ui-fg2`, `--ui-mono`, `--ui-muted`, `--ui-surface` and `--ui-warn`.

## Notes

* Shows three built-in attack sources (a port scan, an SSH brute force and a VPN exploit attempt). No attribute selects other data; detections are simulated every 1.1 s while the element is on screen.
* Block high is the default: it blocks the two high-severity sources and logs the port scan.
* Uses a container query: below 480px the time and address columns hide.