# Containers
> Containers on the demo container host with images, port mappings and start/stop switches. New host ports are checked for clashes.
- Element: `<sv-containers>`
- React: `import { SvContainers } from "@/components/lumesec/sv-containers"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-containers.json
- Page: https://elements.lumesec.ai/components/service-map/containers



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

```html
<sv-containers></sv-containers>
```

## Installation

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

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

## Usage

React:

```tsx
import { SvContainers } from "@/components/lumesec/sv-containers";

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

HTML:

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

<sv-containers></sv-containers>
```

## Behaviour

Containers on a container host with their images and port mappings. A new mapping is checked against every host port already taken.

## API reference

### Events

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

| Event    | React prop | Detail                                                                                                                            | Description                                                                                             |
| -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ action: 'start-container' \| 'stop-container', container: string } \| { action: 'map-port', container: string, port: number }` | Fires when a container is switched on or off, or when a port mapping is added. `port` is the host port. |

## Accessibility

* Containers are a `role="list"`. Each start/stop control is a `role="switch"` with `aria-checked` and a label such as Stop redis.
* Every form field has a visible label. On a validation error the field gets `aria-invalid="true"` and focus, and the message is in an assertive live region.
* Reduced motion: no animation of its own; with reduced motion the switch transition is off. CPU values still update every 1.5 s.

## 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: four containers on cache-01 (redis, redis-sentinel, redis-exporter and a stopped redis-insight). No attribute selects a record.
* The host port must be 1 to 65535 and not mapped by another container in the list; the error offers the next free port. The container port must be 1 to 65535.
* Mappings and switches change only the element's own copy of the data. CPU is simulated.
* Container query: compact rows and a two-column form under 470 px.