Make it yours
npx shadcn@latest add https://elabs-ai.com/r/security-operations-page.jsonPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui template "Security Operations" (security-operations-page) to this project — a whole screen copied into the app, built from registry blocks and the @elabs-ai/components-* packages. A security team's triage screen. The headline says how many alerts are open, how many are critical and how old the oldest is; the queue and the map name the same assets; picking an alert opens its indicators, the alerts linked by the same user or host, and an analyst that has already enriched the indicators and waits for the approval to isolate the host. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Make sure the base is in place: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`), then the packages the template imports: @elabs-ai/components-ai, @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-icons, @elabs-ai/components-maps, @elabs-ai/components-tokens, @elabs-ai/components-ui. If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 3. Copy the template in with `npx shadcn@latest add https://elabs-ai.com/r/security-operations-page.json` — it brings its blocks with it (incident-explorer-01, workspace-shell); if that url does not answer, copy the folders from https://github.com/mreimitz/elabs-components/tree/main/registry/blocks instead. 4. Mount the page at a route, keep its `WorkspaceShell` frame, and replace the seeded data with ours: [the route, the real data source, and what should change from the template] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
What each view shows
The screens the navigation names, one line each.
- Queue
- The headline, the KPIs, the alert queue under its filters and the map.
- Assets
- The open alerts clustered on the offices, data centres and cloud regions they fire from.
- Incidents
- Ninety days of incidents per source, read by the incident explorer.
- Hunts
- The hunts in progress and what they have found.
- Detections
- The rules in force, per source, and how often each fires.
- Reports
- Monthly volume, time to contain and the sources behind it.
Try it on the screen above: Triage an alert from the queue or the map: the dock opens with its indicators and linked alerts, Contain asset isolates the host and steps the row to contained — the nav badge, the KPIs and the toast's Undo agree.
What it is made of
The blocks and packages the template composes — each has its own page. Copy the template and you copy the blocks with it.
2 blocks
Which service pages, on which days — and what did it cost the on-call?
Two selection fields on one screen: an AreaChart of incidents per day whose time-axis range picks days, a horizontal BarChart of incidents by service whose click or axis range picks services, and a DataTable of the pager log that lists the intersection — with four KPIs (count, median time to resolve, severe share, still open) computed from the same rows. Both charts share ONE createLocalSelectionDriver (fields day and service) and paint their own field's states; severity is a StatusBadge with a glyph, so colour is never the only channel.
Examples
Triage And Contain
Triage the critical alert, then contain its host: the dock, the row and the nav badge agree.