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.

View as Markdown

<ln-firewall>· loading

Trymove “Known malicious hosts” to the top.

Installation

pnpm dlx shadcn@latest add @lumesec/ln-firewall

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

Usage

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

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

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.

changeReact proponChangeDetail{ rule: string, enabled: boolean }

Fires when a rule's switch is toggled. rule is the rule name.

reorderReact proponReorderDetail{ 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.

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.

<ln-segments>

Segmentationln-segments

<ln-threats>

Intrusion preventionln-threats

<ln-topology>

Topology editorln-topology

<ln-device-card>

Device cardln-device-card

Was this page helpful?

Related