Top applications

Applications ranked by traffic and re-sorted as rates change, with traffic pixels on each bar; select a row for its top sources.

View as Markdown

<ln-top-apps>· loading

Tryswitch to Up.

Installation

pnpm dlx shadcn@latest add @lumesec/ln-top-apps

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-top-apps.json

Usage

import { LnTopApps } from "@/components/lumesec/ln-top-apps";

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

Behaviour

Traffic by application, re-sorted as rates change. Each bar carries pixels at that application’s rate; select a row for its top sources.

API reference

Events

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

selectReact proponSelectDetail{ app: string }

Fires when a row is clicked. app is the application name.

Accessibility

Rows are button elements with role="listitem" inside a role="list". Each has aria-pressed and an aria-label with the name and current rate.
The direction control is a role="group" labelled Direction (Total, Down, Up) with aria-pressed buttons.
The top-sources panel is aria-live="polite" and refreshes every 1.4 s.
Rows are repositioned visually when the ranking changes; their DOM order stays fixed.
Reduced motion: traffic pixels are not drawn and rows jump to their new position instead of sliding.

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

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

Notes

Shows eight built-in applications with simulated rates that update every 1.4 s while the element is on screen. No attribute selects other data.
Uses a container query: below 460px the bar and percentage columns hide.

<ln-throughput>

Throughputln-throughput

<ln-speedtest>

Speed testln-speedtest

<ln-ping>

Ping monitorln-ping

<ln-path>

Pathln-path

Was this page helpful?

Related