Node

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

Usage

import {
  Node,
  NodeHeader,
  NodeTitle,
  NodeDescription,
  NodeAction,
  NodeContent,
  NodeFooter,
} from '@/components/ai-elements/node';

<Node handles={{ target: true, source: true }}>
  <NodeHeader>
    <NodeTitle>Node Title</NodeTitle>
    <NodeDescription>Optional description</NodeDescription>
    <NodeAction>
      <Button>Action</Button>
    </NodeAction>
  </NodeHeader>
  <NodeContent>
    Main content goes here
  </NodeContent>
  <NodeFooter>
    Footer content
  </NodeFooter>
</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 />`

handles:

{ target: boolean; source: boolean; }

Configuration for connection handles. Target renders on the left, source on the right.

className?:

string

Additional CSS classes to apply to the node.

[...props]:

ComponentProps<typeof Card>

Any other props are spread to the underlying Card component.

`<NodeHeader />`

className?:

string

Additional CSS classes to apply to the header.

[...props]:

ComponentProps<typeof CardHeader>

Any other props are spread to the underlying CardHeader component.

`<NodeTitle />`

[...props]:

ComponentProps<typeof CardTitle>

Any other props are spread to the underlying CardTitle component.

`<NodeDescription />`

[...props]:

ComponentProps<typeof CardDescription>

Any other props are spread to the underlying CardDescription component.

`<NodeAction />`

[...props]:

ComponentProps<typeof CardAction>

Any other props are spread to the underlying CardAction component.

`<NodeContent />`

className?:

string

Additional CSS classes to apply to the content.

[...props]:

ComponentProps<typeof CardContent>

Any other props are spread to the underlying CardContent component.

`<NodeFooter />`

className?:

string

Additional CSS classes to apply to the footer.

[...props]:

ComponentProps<typeof CardFooter>

Any other props are spread to the underlying CardFooter component.