# Service catalog
> Searchable catalog of the demo services grouped by role, with every host each one runs on and the ports it uses.
- Element: `<sv-catalog>`
- React: `import { SvCatalog } from "@/components/lumesec/sv-catalog"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-catalog.json
- Page: https://elements.lumesec.ai/components/service-map/catalog



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

```html
<sv-catalog></sv-catalog>
```

## Installation

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

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

## Usage

React:

```tsx
import { SvCatalog } from "@/components/lumesec/sv-catalog";

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

HTML:

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

<sv-catalog></sv-catalog>
```

## Behaviour

Services grouped by role, with every host they run on and the ports they use.

## API reference

### 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 service is clicked. `service` is the display name, for example `AIOP API`, because one entry can cover several instances. |

## Accessibility

* Groups are native `details` and `summary` elements, open by default.
* Each service is a button with `aria-pressed` for the selection.
* The search field is labelled Search services.
* Reduced motion: only the group chevron rotates; with reduced motion it switches without a 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 `--border`, `--muted` and `--muted-foreground`.

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

## Notes

* Built-in demo data from `INFRA`, grouped as Edge, Applications, Data, Identity and Monitoring. Instances with the same name and type are merged, for example AIOP API on app-01 and app-02. No attribute selects a record.
* Search matches part of the service name or of a host id, or a port prefix. At most two ports are shown per entry.