AI Elements by Vercel
componentcanvassource: ok · hit
Canvas
AI-powered canvas component.
npx shadcn add "https://ai-sdk.dev/elements/api/registry/canvas.json"free
No selection tags yet — empty means no evidence, not lack of support.
Files1 · source cached 10/8/2026, 8:46:15 PM
registry/default/ai-elements/canvas.tsx
import type { ReactFlowProps } from "@xyflow/react";
import { Background, ReactFlow } from "@xyflow/react";
import type { ReactNode } from "react";
import "@xyflow/react/dist/style.css";
type CanvasProps = ReactFlowProps & {
children?: ReactNode;
};
const deleteKeyCode = ["Backspace", "Delete"];
export const Canvas = ({ children, ...props }: CanvasProps) => (
<ReactFlow
deleteKeyCode={deleteKeyCode}
fitView
panOnDrag={false}
panOnScroll
selectionOnDrag={true}
zoomOnDoubleClick={false}
{...props}
>
<Background bgColor="var(--sidebar)" />
{children}
</ReactFlow>
);