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

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

`<NodeHeader />`

Prop

Type

`<NodeTitle />`

Prop

Type

`<NodeDescription />`

Prop

Type

`<NodeAction />`

Prop

Type

`<NodeContent />`

Prop

Type

`<NodeFooter />`

Prop

Type