# Traffic shaping
> Strict-priority traffic shaping with guaranteed minimums and per-class ceilings; each lane shows what a class actually receives.
- Element: `<ln-qos>`
- React: `import { LnQos } from "@/components/lumesec/ln-qos"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-qos.json
- Page: https://elements.lumesec.ai/components/network/qos



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

```html
<ln-qos></ln-qos>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-qos
```

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-qos.json
```

## Usage

React:

```tsx
import { LnQos } from "@/components/lumesec/ln-qos";

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

HTML:

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

<ln-qos></ln-qos>
```

## Behaviour

Strict-priority shaping with guaranteed minimums and per-class ceilings. Allocation is recalculated as demand changes, and each lane shows what a class actually receives.

## API reference

### Events

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

| Event    | React prop | Detail                               | Description                                                    |
| -------- | ---------- | ------------------------------------ | -------------------------------------------------------------- |
| `change` | `onChange` | `{ class: string, ceiling: number }` | Fires when a ceiling slider is released. `ceiling` is in Mb/s. |

## Accessibility

* Each ceiling is a native range input (10 to 1000 Mb/s, step 10) with an `aria-label` such as "Ceiling for Bulk".
* Committed changes are announced in a polite live region.
* The capacity bar and the lane canvases are `aria-hidden`; allocation and demand are text.
* Reduced motion: traffic pixels in the lanes are not drawn and the capacity bar changes without transition.

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

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

## Notes

* Shows five built-in classes on a 1 Gb/s WAN. No attribute selects other classes; demand is simulated and changes every 1.3 s while the element is on screen, and allocation is recalculated on every slider movement.
* Allocation gives each class its minimum (limited by demand and ceiling), then shares spare capacity among the High, Medium and Low tiers in that order.
* Uses a container query: below 480px the lanes hide and each slider moves under its class.