# Middleware chain
> Middleware chain of one demo proxy route with switchable steps. Above 200 req/s the rate limiter answers the excess with 429.
- Element: `<sv-middleware>`
- React: `import { SvMiddleware } from "@/components/lumesec/sv-middleware"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-middleware.json
- Page: https://elements.lumesec.ai/components/service-map/middleware



Live preview: https://elements.lumesec.ai/view/sv-middleware

```html
<sv-middleware></sv-middleware>
```

## Installation

```bash
npx shadcn@latest add @lumesec/sv-middleware
```

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/sv-middleware.json
```

## Usage

React:

```tsx
import { SvMiddleware } from "@/components/lumesec/sv-middleware";

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

HTML:

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

<sv-middleware></sv-middleware>
```

## Behaviour

The steps a request passes before it reaches the service. Above the rate limit, the excess is answered with 429 at the limiter.

## API reference

### Events

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

| Event    | React prop | Detail                                                                        | Description                                                                                       |
| -------- | ---------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ action: 'enable-middleware' \| 'disable-middleware', middleware: string }` | Fires when a step is switched on or off. `middleware` is the step name, for example `Rate limit`. |

## Accessibility

* Each step has a `role="switch"` with `aria-checked`, labelled with the step name. The TLS switch cannot be turned off and stays checked.
* The incoming-rate slider is labelled Incoming requests per second. The outcome sentence is a polite live region.
* Step details are only in `title` tooltips. The canvas is `aria-hidden`.
* Reduced motion: no request particles are drawn and the pulsing outline on the rate limiter does not animate.

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

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-danger`, `--ui-fg`, `--ui-muted` and `--ui-surface`.

## Notes

* Built-in demo chain for api.lumesec.local: TLS, IP allowlist, Rate limit (200 req/s), Auth, Headers and Compress. The incoming rate ranges from 20 to 600 req/s, default 160. No attribute selects a record.
* Only the rate limiter changes how much traffic passes; switching other steps changes their state and fires `change`.
* Container query: three steps per row under 520 px.