# Consumer × provider
> Consumer-by-provider grid of every direct demo connection, shaded by request rate, with arrow-key movement between cells.
- Element: `<sv-matrix>`
- React: `import { SvMatrix } from "@/components/lumesec/sv-matrix"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-matrix.json
- Page: https://elements.lumesec.ai/components/service-map/matrix



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

```html
<sv-matrix></sv-matrix>
```

## Installation

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

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

## Usage

React:

```tsx
import { SvMatrix } from "@/components/lumesec/sv-matrix";

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

HTML:

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

<sv-matrix></sv-matrix>
```

## Behaviour

Every direct connection as a cell, shaded by request rate.

## API reference

### Events

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

| Event    | React prop | Detail                         | Description                                                                        |
| -------- | ---------- | ------------------------------ | ---------------------------------------------------------------------------------- |
| `select` | `onSelect` | `{ from: string, to: string }` | Fires when a non-empty cell is chosen, with the consumer and provider service ids. |

## Keyboard

| Keys                                         | Action                                                     |
| -------------------------------------------- | ---------------------------------------------------------- |
| ArrowLeft / ArrowRight / ArrowUp / ArrowDown | Move focus to the neighbouring cell, empty cells included. |

## Accessibility

* The table has `role="grid"` and an `aria-label` that explains rows and columns; headers use `scope`.
* Each cell is a button whose `aria-label` names consumer, provider and requests per second. Empty cells are labelled none and have `tabindex="-1"`.
* The connection detail under the grid is a polite live region.
* Reduced motion: no animation; values update every 1.5 s regardless of the setting.

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

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

## Notes

* Built-in demo data: 8 consumers by 10 providers from the `INFRA` edges, monitoring scrapes excluded. No attribute selects a record.
* Shading follows the square root of each rate relative to the busiest connection. Rates are simulated.
* The grid scrolls horizontally in narrow containers.