# Dependencies
> One demo service in the centre with its consumers on the left and dependencies on the right. Moving pixels show live requests.
- Element: `<sv-deps>`
- React: `import { SvDeps } from "@/components/lumesec/sv-deps"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-deps.json
- Page: https://elements.lumesec.ai/components/service-map/deps



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

```html
<sv-deps></sv-deps>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

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

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

## Usage

React:

```tsx
import { SvDeps } from "@/components/lumesec/sv-deps";

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

HTML:

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

<sv-deps></sv-deps>
```

## Behaviour

One service in the middle, what consumes it on the left and what it consumes on the right. The pixels are requests.

## API reference

### Attributes

| Attribute | React prop | Type     | Default | Description                                                                                                                                                                                                                            |
| --------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `svc`     | `svc`      | `string` | `pgb`   | Id of the service to centre, for example `pgb` or `api-1`. Exporters and the Internet clients are not in the menu; an id that is not in the menu falls back to the first entry (Reverse proxy on edge-01). Read once on first connect. |

### Events

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

| Event    | React prop | Detail                | Description                                                                                                                                                                                                                                           |
| -------- | ---------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `select` | `onSelect` | `{ service: string }` | Fires when a consumer or dependency is clicked; that service moves to the centre. `service` is its id. The Internet clients node is not in the menu, so clicking it centres the first entry (Reverse proxy). Choosing from the menu does not fire it. |

## Accessibility

* The service menu is labelled Service. Consumers and dependencies are buttons that show their host and request rate as text.
* The traffic canvas and the column headings are `aria-hidden`.
* Reduced motion: no request particles are drawn and the connecting lines are static.

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

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

## Notes

* Reads the shared demo infrastructure `INFRA`, without monitoring scrapes; `svc="pgb"` selects the record.
* Rates are simulated around the demo values and update every second.
* Container query: under 480 px the icons and column headings are hidden.