# Listen addresses
> Listen address of each demo service, switchable between all interfaces, the host address and localhost. Public non-proxy listeners are flagged.
- Element: `<sv-bindings>`
- React: `import { SvBindings } from "@/components/lumesec/sv-bindings"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-bindings.json
- Page: https://elements.lumesec.ai/components/service-map/bindings



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

```html
<sv-bindings></sv-bindings>
```

## Installation

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

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

## Usage

React:

```tsx
import { SvBindings } from "@/components/lumesec/sv-bindings";

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

HTML:

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

<sv-bindings></sv-bindings>
```

## Behaviour

Where each service listens: on all interfaces, on the host address or only locally. Public listeners outside the reverse proxy are flagged.

## API reference

### Events

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

| Event    | React prop | Detail                                                            | Description                                                                                                                                      |
| -------- | ---------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `change` | `onChange` | `{ action: 'bind', service: string, port: number, bind: string }` | Fires when a listen address is chosen. `service` is the display name, for example `Redis`; `bind` is `0.0.0.0`, `127.0.0.1` or the host address. |

## Accessibility

* Each row's choice is a `role="group"` labelled Listen address for the service, with `aria-pressed` buttons.
* Rows are a `role="list"`. The summary counts are a polite live region.
* Reduced motion: no animation; with reduced motion only the shared button transitions are switched off.

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

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-border`, `--ui-muted`, `--ui-ok` and `--ui-warn`.

## Notes

* Built-in demo data: eight services from `INFRA` (Reverse proxy, AIOP API on app-01, Admin UI, Job worker, Identity, PostgreSQL, Redis, Grafana). Redis starts on 0.0.0.0 to show the warning. No attribute selects a record.
* Public on any service other than the reverse proxy shows a warning that suggests binding to the host address and routing through the proxy.
* Only the first port of each service is shown. The event carries the service name, not its id.