# 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.
- Element: `<ln-top-apps>`
- React: `import { LnTopApps } from "@/components/lumesec/ln-top-apps"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-top-apps.json
- Page: https://elements.lumesec.ai/components/network/top-apps



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

```html
<ln-top-apps></ln-top-apps>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-top-apps
```

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

## Usage

React:

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

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

HTML:

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

<ln-top-apps></ln-top-apps>
```

## 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.

| Event    | React prop | Detail            | Description                                                 |
| -------- | ---------- | ----------------- | ----------------------------------------------------------- |
| `select` | `onSelect` | `{ 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](/docs/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.