Source: https://ai-sdk.dev/elements/components/node

Vercel

Slash Forward

Sparkles

AI SDK

Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway

Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel

Workflow

Node

A composable node component for React Flow-based canvases with Card-based styling.

The Node component provides a composable, Card-based node for React Flow canvases. It includes support for connection handles, structured layouts, and consistent styling using shadcn/ui components.

The Node component is designed to be used with the Canvas component. See the Workflow demo for a full example.

Installation

AI Elements

shadcn CLI

Manual

npx ai-elements@latest add node

Features

Built on shadcn/ui Card components for consistent styling
Automatic handle placement (left for target, right for source)
Composable sub-components (Header, Title, Description, Action, Content, Footer)
Semantic structure for organizing node information
Pre-styled sections with borders and backgrounds
Responsive sizing with fixed small width
Full TypeScript support with proper type definitions
Compatible with React Flow's node system

Props

`<Node />`

Prop

Type

handles?{ target: boolean; source: boolean; }

className?string

...props?ComponentProps<typeof Card>

`<NodeHeader />`

Prop

Type

className?string

...props?ComponentProps<typeof CardHeader>

`<NodeTitle />`

Prop

Type

...props?ComponentProps<typeof CardTitle>

`<NodeDescription />`

Prop

Type

...props?ComponentProps<typeof CardDescription>

`<NodeAction />`

Prop

Type

...props?ComponentProps<typeof CardAction>

`<NodeContent />`

Prop

Type

className?string

...props?ComponentProps<typeof CardContent>

`<NodeFooter />`

Prop

Type

className?string

...props?ComponentProps<typeof CardFooter>

Edge

Customizable edge components for React Flow canvases with animated and temporary states. Panel

A styled panel component for React Flow-based canvases to position custom UI elements.

On this page

Installation Features Props <Node /> <NodeHeader /> <NodeTitle /> <NodeDescription /> <NodeAction /> <NodeContent /> <NodeFooter />

GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat