Containers

Installation#

pnpm dlx shadcn@latest add @lumesec/sv-containers

pnpm dlx 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#

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

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

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.

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.

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.