Canvas for Radix UI

Nodes sit on a dotted board, wired output to input by curved edges, and the board pans and zooms under them.

Use it to show or edit an agent's workflow: the steps a run takes, the tools it calls, where it branches. Each node is a Card you fill like any other, so a step can hold a model name, badges or a status. A straight list of steps reads better as a Plan or a Trace; a canvas earns its place when the steps branch and join. In React, the canvas is written for this page: pointer events, a ResizeObserver per node and three CSS variables for the view, with no flow library underneath.

Installation

Anatomy

Canvas
├── CanvasEdge (one per edge)
├── CanvasNode (one per node, with its handles)
│   ├── CanvasNodeHeader
│   │   ├── CanvasNodeTitle
│   │   ├── CanvasNodeDescription
│   │   └── CanvasNodeAction
│   ├── CanvasNodeContent
│   ├── CanvasNodeFooter
│   └── CanvasToolbar
├── CanvasConnection
├── CanvasControls
└── CanvasPanel

Usage

import {
  Canvas, CanvasConnection, CanvasControls, CanvasEdge, CanvasNode,
  CanvasNodeContent, CanvasNodeDescription, CanvasNodeHeader,
  CanvasNodeTitle,
} from "@/components/ui/canvas";

<Canvas className="h-96">
  <CanvasEdge source="plan" target="code" type="animated" />
  <CanvasNode className="w-56" id="plan" x={0} y={0}>
    <CanvasNodeHeader>
      <CanvasNodeTitle>Plan</CanvasNodeTitle>
      <CanvasNodeDescription>Splits the task into steps</CanvasNodeDescription>
    </CanvasNodeHeader>
    <CanvasNodeContent>4 steps</CanvasNodeContent>
  </CanvasNode>
  <CanvasNode className="w-56" id="code" x={300} y={40}>
    <CanvasNodeHeader>
      <CanvasNodeTitle>Code</CanvasNodeTitle>
      <CanvasNodeDescription>Writes and tests each step</CanvasNodeDescription>
    </CanvasNodeHeader>
    <CanvasNodeContent>Running step 2</CanvasNodeContent>
  </CanvasNode>
  <CanvasConnection />
  <CanvasControls />
</Canvas>

Give the canvas a height: it fills its box, and its nodes are placed in it, not stacked in the page. Positions are in canvas units, x from the inline start and y down; the view fits them all once they're measured, so where 0, 0 lands on screen doesn't matter.

Accessibility

The canvas is an application region named Canvas, so a screen reader passes it the keys. Each node is a focusable group named by its CanvasNodeTitle, and its handles are buttons: press a node's output, then another node's input, and they connect, with no dragging. A polite live region says where a node was moved and what was connected. The zoom, fit and lock buttons are named, and lock is a toggle (aria-pressed). In right-to-left text the flow mirrors: a node's input is on its right, and the arrow keys move it the way they point.

Demos

Node

Four nodes of a retrieval step: User Input and Context feed AI Agent, which answers in Response. CanvasNode is a Card, so its parts are a Card's: a header with a title, a description and an action (the agent's settings button), content with two Badges, and a footer. handles takes { source, target }: the trigger has an output only, the response an input only. Set the width on the node with className; it holds that width at any zoom.

Edge

Three edges, one of each type. animated runs a dot along the line, from the output to the input, for a link that is carrying work right now. The default is a plain line, and temporary is dashed, for a branch that hasn't run or a link the agent has proposed. Each edge reads its two nodes' boxes, so it follows them when they move. With reduced motion the dot stops halfway.

Connection

Three nodes and no edges: drag from a node's output to another node and let go anywhere on it. CanvasConnection draws the line while you drag, and onConnect on the canvas gets { source, target } when you drop; the demo adds an edge for it. From the keyboard, press an output handle, then another node's input. A node never connects to itself, and the edge list is yours, so skipping a duplicate is up to you.

Controls

CanvasControls puts zoom in, zoom out, fit view and lock in a row at the bottom of the canvas: orientation is horizontal and position is bottom-center. By default they stand in a column at bottom-start. Lock stops nodes being moved, selected or connected; the view still pans and zooms. showZoom, showFitView and showInteractive hide a button each, and children add your own after them.

Panel

Two panels over one node: three icon buttons at top-start and a node count at bottom-end. A panel stays where it is while the view pans and zooms, and a press on it never reaches the canvas, so its buttons can't start a pan. position takes the four logical corners and top-center or bottom-center. Keep panels small: the board is the content.

Toolbar

Each node holds a CanvasToolbar, shown while the node is selected: Node B starts selected (defaultValue on the canvas). Click a node to move the toolbar to it; Escape or a click on the board hides it. Duplicate adds a copy below, and delete removes the node from the list. The toolbar floats under its node, or over it with position="top", and keeps its size at any zoom.

Migrating from AI SDK Elements

AI Elements' canvas is React Flow (opens in a new tab) with its own styles: nodes and edges are arrays, drawn through nodeTypes and edgeTypes. Here they are children, so there are no arrays to register and no @xyflow/react to install. The part names gain a Canvas prefix, because Node, Edge, Panel and Toolbar are browser globals and other components' names.

Left out of React Flow: edge selection and deleting with Backspace, edge labels and arrowheads, box selection and multi-select, snapping to a grid, a minimap, top and bottom handles and more than one handle per side, and pinch zoom on touch screens (trackpads pinch). Wheel zooms by default, where AI Elements pans: set panOnScroll for its behavior.

Migrate the canvas in components/ai-elements/ (canvas.tsx, node.tsx, edge.tsx, connection.tsx, controls.tsx, panel.tsx, toolbar.tsx) from AI SDK Elements to the shadcn.io Canvas component.

1. Read https://kit.dev/ui/radix/canvas.md and run the command in its Installation section.
2. Where a Canvas is given nodes and edges arrays, render a CanvasNode for each node (id, x and y from its position, the nodeTypes component's parts inside it) and a CanvasEdge for each edge (source, target, and type "animated" or "temporary" for Edge.Animated and Edge.Temporary).
3. Rename the parts: Node to CanvasNode, NodeHeader to CanvasNodeHeader (and the other Node parts likewise), Controls to CanvasControls, Panel to CanvasPanel, Toolbar to CanvasToolbar. Replace connectionLineComponent={Connection} with a <CanvasConnection /> child, and left and right in panel positions with start and end.
4. Replace onConnect's addEdge with adding { source, target } to the edges state.
5. Remove @xyflow/react, its stylesheet and ReactFlowProvider, then run the type checker and fix any errors.

FAQ

API Reference