Service catalog
Searchable catalog of the demo services grouped by role, with every host each one runs on and the ports it uses.
Installation
pnpm dlx shadcn@latest add @lumesec/sv-catalogFirst 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-catalog.jsonUsage
import { SvCatalog } from "@/components/lumesec/sv-catalog";
export function Example() {
return (
<SvCatalog />
);
}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.
selectReact proponSelectDetail{ 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
detailsandsummaryelements, open by default. - Each service is a button with
aria-pressedfor 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.
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.
Related
Was this page helpful?