Hypervisors
Two hypervisors with their VMs and allocated cores and memory. Live migration shows the memory copy as traffic between the hosts.
Installation
pnpm dlx shadcn@latest add @lumesec/sv-vm-stackFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/sv-vm-stack.jsonUsage
import { SvVmStack } from "@/components/lumesec/sv-vm-stack";
export function Example() {
return (
<SvVmStack />
);
}Behaviour
Virtual machines on their hypervisors with allocated cores and memory. Live migration shows the memory copy running between the two hosts.
API reference
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
changeReact proponChangeDetail{ action: 'migrate', vm: string, to: string }Fires when a migration finishes. vm is the VM's host id, to the target hypervisor (hv-01 or hv-02).
Accessibility
- VMs are buttons with
aria-pressedfor the selection. The Migrate button is disabled until a VM is selected and while a migration runs. - A polite live region reports copy progress and the result.
- The traffic canvas is
aria-hidden. - Reduced motion: a migration completes after 50 ms instead of 2.6 s plus 30 ms per GB, and no particles travel between the hypervisors.
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, --card, --foreground, --input, --lumesec, --muted and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-border-strong, --ui-fg, --ui-fg2, --ui-mono, --ui-muted, --ui-raised and --ui-surface.
Notes
- Built-in demo data: hv-01 (64 cores, 512 GB) and hv-02 (64 cores, 384 GB) with the VMs edge-01, app-01, mon-01, app-02, auth-01 and cache-01, placed as in
INFRA. No attribute selects a record. - Capacity is not checked before a migration. The reported downtime of 38 ms is fixed demo text.
- Container query: under 470 px the hypervisors stack vertically.
Related
Was this page helpful?