npx shadcn@latest add https://elabs-ai.com/r/infographic-kpi-tree-01.jsonPaste 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 "KPI Tree" (infographic-kpi-tree-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 infographic-kpi-tree-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/infographic-kpi-tree-01.json`; if that url does not answer, copy its files from https://github.com/mreimitz/elabs-components/tree/main/registry/blocks/infographic-kpi-tree-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
Examples
Operators On The Lines
The arithmetic is on the lines, not only in the detail text: Revenue’s link carries **+**, Operating costs’ link **−** (dashed, so it reads in greyscale), and the two customer drivers under Revenue carry **×**. The same fact is spoken in each tree item’s name (“adds to operating profit”, “subtracts from operating profit”, “multiplies into revenue”), so a screen-reader user hears how the number is built as they arrow through it.
Zoom And Minimap
The tree is a canvas, as a flow diagram is: zoom in / out / fit controls and a minimap in the corner, the wheel zooms around the pointer, dragging pans (from the empty canvas or from a card, even when the whole tree fits), and clicking the minimap moves the view. The keyboard tree and the expand/collapse pills keep working at any zoom.
Horizontal
The same tree growing left to right, for a wide screen.
Expand With Keyboard
Keyboard only: arrow down to Customers, then arrow right opens it and shows its two drivers.
Expand All
“Expand all” opens every branch and keeps focus, so a keyboard user can go straight on to “Collapse”. With nothing left to open it says so (`aria-disabled`) instead of dropping focus.
Select A Driver
Select a card and the line under the tree restates it: its formula, its moves and its share of the year’s change.