# Firewall rules
> Ordered firewall rules with live hit counters; the first match wins, and rows reorder by dragging or with Alt and the arrow keys.
- Element: `<ln-firewall>`
- React: `import { LnFirewall } from "@/components/lumesec/ln-firewall"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-firewall.json
- Page: https://elements.lumesec.ai/components/network/firewall



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

```html
<ln-firewall></ln-firewall>
```

## Installation

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

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

## Usage

React:

```tsx
import { LnFirewall } from "@/components/lumesec/ln-firewall";

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

HTML:

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

<ln-firewall></ln-firewall>
```

## Behaviour

Ordered rules with live hit counters. The first matching rule wins; drag a row, or use Alt with the arrow keys, to reorder.

## API reference

### Events

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

| Event     | React prop  | Detail                               | Description                                                                            |
| --------- | ----------- | ------------------------------------ | -------------------------------------------------------------------------------------- |
| `change`  | `onChange`  | `{ rule: string, enabled: boolean }` | Fires when a rule's switch is toggled. `rule` is the rule name.                        |
| `reorder` | `onReorder` | `{ rule: string, position: number }` | Fires after a rule moves, by drag or keyboard. `position` is its new 1-based position. |

## Keyboard

| Keys                            | Action                                                                                     |
| ------------------------------- | ------------------------------------------------------------------------------------------ |
| Alt + ArrowUp / Alt + ArrowDown | On a rule's drag handle: move the rule one position up or down. Focus stays on the handle. |

## Accessibility

* Each drag handle is a button labelled "Move rule N". Each enable control is a `role="switch"` with `aria-checked` and an `aria-label` such as "Enable Guest Wi-Fi to internal".
* Moves are announced in a polite live region ("… moved to position N").
* After the list re-renders, focus returns to the toggled switch or the moved handle.
* Reduced motion: cSS transitions are removed, including the row shift while dragging; hit counters still update every 700 ms.

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

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

## Notes

* Shows six built-in demo rules. No attribute selects other rules; hit counters are simulated and only count while a rule is enabled.
* Order and state are display only; the element does not evaluate traffic against the rules.
* Uses a container query: below 470px the position numbers and hit counters hide.