Skip to main content

Incident Explorer

Command Centers

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.

Open in StorybookSource
npx shadcn@latest add https://elabs-ai.com/r/incident-explorer-01.json

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui registry block "Incident Explorer" (incident-explorer-01) to this project. A block is copied into the app and becomes my code.

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. Find it and what it is built from: `npx -y @elabs-ai/components-cli search incident-explorer-01`.
3. 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`), plus the packages the block imports. 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`.
4. Copy the block in with `npx shadcn@latest add https://elabs-ai.com/r/incident-explorer-01.json`; if that url does not answer, copy its files from https://github.com/mreimitz/elabs-components/tree/main/registry/blocks/incident-explorer-01 instead. Then adapt it here: [the screen or file, and the real data it should show]
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.

Dependencies

  • @elabs-ai/components-charts
  • @elabs-ai/components-data
  • @elabs-ai/components-icons
  • @elabs-ai/components-tokens
  • @elabs-ai/components-ui
  • lucide-react

Examples

3 live examples

Narrow

In a dashboard column: the charts stack, the table flips to cards, the same block.

Days And Service Together

**A range of days AND a service narrow the log together.** Keyboard first: the daily chart's range button, Home on the start thumb, Enter — the `day` field now holds the first days of the window and the count KPI drops. Then the service ranking's range button, Home, Enter — the busiest service joins as the `service` field, the ranking paints the rest `excluded`, and the table lists only rows that pass BOTH fields. Clear empties both.