Skip to content
NewService Map: 30 components for hosts, ports and routes
<ln-egress>Custom elementTrafficFree

AI egress

AI model traffic from AIOP to each endpoint; with EU-only routing on, requests to endpoints outside the EU stop at the policy point.

View as Markdown
<ln-egress>

Tryturn off EU-only routing.

Installation

pnpm dlx shadcn@latest add @lumesec/ln-egress
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-egress.json

Usage

import { LnEgress } from "@/components/lumesec/ln-egress";

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

Behaviour

Model traffic from AIOP to each endpoint. With EU-only routing on, requests to endpoints outside the EU stop at the policy point and are counted.

API reference

Events

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

policyReact proponPolicyDetail{ euOnly: boolean }

Fires when EU-only routing is switched on or off.

Accessibility

  • EU-only routing is a role="switch" button with aria-checked and aria-label="EU-only routing".
  • Switching it announces the new policy in a polite live region.
  • Each endpoint's state (EU, Local, Outside EU, Blocked) and rate are text; the canvas is aria-hidden.
  • Reduced motion: traffic pixels and the flash at the block point 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 --border, --card, --destructive, --foreground, --lumesec, --lumesec-success, --lumesec-warning, --muted and --muted-foreground.

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

Notes

  • Shows five built-in endpoints, one outside the EU (Unlisted endpoint, us-east-1). No attribute selects other endpoints; rates and counters are simulated and update every second while the element is on screen.
  • EU-only routing is on by default; while it is on, Blocked today keeps counting.
  • Uses a container query: below 470px the source box narrows and the stats wrap to two columns.

Was this page helpful?