Intrusion prevention
Intrusion detections at the gateway by source; depending on the mode, attempts stop at the shield or are logged and let through.
Installation
pnpm dlx shadcn@latest add @lumesec/ln-threatsFirst 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}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/ln-threats.jsonUsage
import { LnThreats } from "@/components/lumesec/ln-threats";
export function Example() {
return (
<LnThreats />
);
}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.
modeReact proponModeDetail{ 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 witharia-pressedbuttons. - 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.
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.
Related
Was this page helpful?