brand-ui — CanvasShell

import { CanvasShell } from "@elabs-ai/components-flow";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-flow

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 CanvasShell 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 CanvasShell up before writing code: `npx -y @elabs-ai/components-cli docs CanvasShell` 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.

Avoid

Hardcoding node/edge colors — use the flow-node/flow-edge tokens so the canvas matches the theme.
Hiding the React Flow attribution without the appropriate license.
Forgetting to import @xyflow/react/dist/style.css once in the consuming app.

Works with

Contains

Pairs with

Examples

2 live examples

Keyboard Selection

Issue 536: a STATIC canvas (fixed `nodes`, no `onNodesChange`) selects a node from the keyboard exactly like a click. Every node is a `role="group"` named by its title. Tab to a node, press Enter, and it is selected; tab on and press Space, and the selection moves.

API

`CanvasShell`

Prop	Type	Description
`background`	`boolean`	Render a branded dotted background grid. Defaults to true.
`helperLines`	`boolean`	Enable alignment guides + snapping while a single node is dragged. Off by default; when false, CanvasShell behaves exactly as before. When true, CanvasShell wires `useHelperLines` around your `onNodesChange` and renders the `<HelperLines>` overlay internally — pass `nodes` + `onNodesChange` (the standard controlled setup, e.g. via `useNodesState`). For full control use the exported `useHelperLines` + `<HelperLines>` directly.
`fitViewKey`	`string \| number`	Re-fit the viewport whenever this value changes. React Flow's own `fitView` prop fits ONCE, as soon as the nodes are first measured, and then never again. A canvas whose positions arrive AFTER that first paint — anything laid out asynchronously, e.g. a debounced `layoutFlow` pass — therefore gets fitted to the pre-layout positions (typically every node still stacked at the origin) and stays there. Measured on the process map: the viewport pinned at React Flow's `maxZoom` of 2 with 2 of 11 nodes on screen, while the layout underneath was correct the whole time. Pass the key the layout is cached on (structure + direction), NOT something that changes on every render and not a metric: a re-fit is a viewport jump, so it must happen when the picture genuinely moved and never while the reader is reading. The fit waits for `useNodesInitialized`, so it measures real node boxes rather than fitting a degenerate bounding box a second time.
`fitViewKeyOptions`	`FitViewOptions`	Options for the {@link fitViewKey} re-fit. Ignored without one.
`fitViewAnchorNodeIds`	`readonly string[]`	Which nodes a CLAMPED {@link fitViewKey} re-fit keeps in view — typically where the diagram begins. A fit that cannot shrink far enough (a `minZoom` floor) is pinned to the content's top-left corner by default, which is where a top-down layout starts; a left-to-right layout starts at the left edge but at mid-height, so pinning to the top opens on an empty corner. With anchors, each overflowing axis centres the anchor nodes instead, without ever scrolling past the content's own edge. Unset: today's corner pin.
`children`	`ReactNode`	Overlays rendered inside the flow (ZoomControls, Legend, Panels).
`className`	`string`

Also accepts: ReactFlowProps<NodeType, EdgeType>

`ZoomControls`

Prop	Type	Description
`position`	`PanelPosition`
`className`	`string`

Theming

The tokens each state resolves to. Change the token and every theme follows.

State	Token
background	`--canvas / --canvas-grid`