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

npx ai-elements@latest add node

npx shadcn@latest add @ai-elements/node

npx shadcn@latest add @ai-elements/node

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@repo/shadcn-ui/components/ui/card";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { Handle, Position } from "@xyflow/react";
import type { ComponentProps } from "react";

export type NodeProps = ComponentProps<typeof Card> & {
  handles: {
    target: boolean;
    source: boolean;
  };
};

export const Node = ({ handles, className, ...props }: NodeProps) => (
  <Card
    className={cn(
      "node-container relative size-full h-auto w-sm gap-0 rounded-md p-0",
      className
    )}
    {...props}
  >
    {handles.target && <Handle position={Position.Left} type="target" />}
    {handles.source && <Handle position={Position.Right} type="source" />}
    {props.children}
  </Card>
);

export type NodeHeaderProps = ComponentProps<typeof CardHeader>;

export const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (
  <CardHeader
    className={cn("gap-0.5 rounded-t-md border-b bg-secondary p-3!", className)}
    {...props}
  />
);

export type NodeTitleProps = ComponentProps<typeof CardTitle>;

export const NodeTitle = (props: NodeTitleProps) => <CardTitle {...props} />;

export type NodeDescriptionProps = ComponentProps<typeof CardDescription>;

export const NodeDescription = (props: NodeDescriptionProps) => (
  <CardDescription {...props} />
);

export type NodeActionProps = ComponentProps<typeof CardAction>;

export const NodeAction = (props: NodeActionProps) => <CardAction {...props} />;

export type NodeContentProps = ComponentProps<typeof CardContent>;

export const NodeContent = ({ className, ...props }: NodeContentProps) => (
  <CardContent className={cn("p-3", className)} {...props} />
);

export type NodeFooterProps = ComponentProps<typeof CardFooter>;

export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
  <CardFooter
    className={cn("rounded-b-md border-t bg-secondary p-3!", className)}
    {...props}
  />
);

import {  Card,  CardAction,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle,} from "@repo/shadcn-ui/components/ui/card";import { cn } from "@repo/shadcn-ui/lib/utils";import { Handle, Position } from "@xyflow/react";import type { ComponentProps } from "react";export type NodeProps = ComponentProps<typeof Card> & {  handles: {    target: boolean;    source: boolean;  };};export const Node = ({ handles, className, ...props }: NodeProps) => (  <Card    className={cn(      "node-container relative size-full h-auto w-sm gap-0 rounded-md p-0",      className    )}    {...props}  >    {handles.target && <Handle position={Position.Left} type="target" />}    {handles.source && <Handle position={Position.Right} type="source" />}    {props.children}  </Card>);export type NodeHeaderProps = ComponentProps<typeof CardHeader>;export const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (  <CardHeader    className={cn("gap-0.5 rounded-t-md border-b bg-secondary p-3!", className)}    {...props}  />);export type NodeTitleProps = ComponentProps<typeof CardTitle>;export const NodeTitle = (props: NodeTitleProps) => <CardTitle {...props} />;export type NodeDescriptionProps = ComponentProps<typeof CardDescription>;export const NodeDescription = (props: NodeDescriptionProps) => (  <CardDescription {...props} />);export type NodeActionProps = ComponentProps<typeof CardAction>;export const NodeAction = (props: NodeActionProps) => <CardAction {...props} />;export type NodeContentProps = ComponentProps<typeof CardContent>;export const NodeContent = ({ className, ...props }: NodeContentProps) => (  <CardContent className={cn("p-3", className)} {...props} />);export type NodeFooterProps = ComponentProps<typeof CardFooter>;export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (  <CardFooter    className={cn("rounded-b-md border-t bg-secondary p-3!", className)}    {...props}  />);

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>