import { FlowGroupNode } from "@elabs-ai/components-flow";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-flowPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui FlowGroupNode component (from @elabs-ai/components-flow) to this project. 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. Look FlowGroupNode up before writing code: `npx -y @elabs-ai/components-cli docs FlowGroupNode` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-flow is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-flow` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-flow`). 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. Use it here: [the screen or file, and what 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.
Examples
Expand And Collapse
Collapse the group to an overview chip via the header chevron (or the toolbar). The `Transform → Warehouse` edge crosses the collapse boundary, so it is re-routed to a **proxy edge** from the group node to `Warehouse`; the fully-inside `Extract → Transform` edge is simply hidden. Expanding restores the exact original graph.
Nested Groups
A subgroup (`Enrichment`) nested inside an outer group (`Region: EU`). Collapse the inner group first, then the outer — each header toggle works independently, and expanding the outer keeps the inner collapsed (no double-unhide). Edges that cross either boundary re-route to proxy edges on the relevant group.
Tones
Every status tone and both emphasis values on a group. The tone colours the header's icon (the fill rung) and count badge (the text rung) and adds its glyph and name; the group keeps its own surface and border. `featured` adds the star.
Keyboard Focus
A group is a keyboard stop like any node. React Flow focuses its own wrapper, so the group's frame paints the proxied focus indicator, separate from the selection ring.