brand-ui — Canvas

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

Install

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

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 Canvas component (from @elabs-ai/components-ai) 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 Canvas up before writing code: `npx -y @elabs-ai/components-cli docs Canvas` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-ai is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai`). 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

Reaching for it to build an author-made diagram — that is CanvasShell/FlowNode in the flow package; this one is the agent's in-chat graph.
Re-enabling pan-on-drag — it pans on scroll and drags a SELECTION, so a drag that pans would break rubber-band select.
Repainting the backdrop with a literal colour — the background is already painted from the theme's canvas token.

Works with

Contains

Node
Edge
Controls
Panel
NodeToolbar
Connection

Used inside

ChatShell

Avoid next to

CanvasShell

Examples

2 live examples

Vertical Handles

A consumer node type whose handles sit on the TOP and BOTTOM rather than the left and right, joined by the shipped animated edge. The edge must terminate on those handles. Before the fix the edge looked for a handle at a hard-coded `Right`/`Left` position and, finding none, resolved the anchor to `[0, 0]` — so the line was drawn to the CANVAS ORIGIN, hundreds of pixels from either node. The same `[0, 0]` fallback fired on the frames before React Flow has measured its handles, which on this canvas is a real window because the engine arrives in a lazy chunk (ADR 0019).

API

`Canvas`

Prop	Type	Description
`children`	`ReactNode`

Also accepts: ReactFlowProps

`Node`

Prop	Type	Description
`handles`required	`{ target: boolean; source: boolean; }`

Also accepts: ComponentProps<typeof Card>