152 lines
3.6 KiB
Markdown
152 lines
3.6 KiB
Markdown
# Node
|
|
|
|
URL: /components/node
|
|
|
|
---
|
|
|
|
title: Node
|
|
description: A composable node component for React Flow-based canvases with Card-based styling.
|
|
path: elements/components/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.
|
|
|
|
<Callout>
|
|
The Node component is designed to be used with the [Canvas](/elements/components/canvas) component. See the [Workflow](/elements/examples/workflow) demo for a full example.
|
|
</Callout>
|
|
|
|
## Installation
|
|
|
|
<ElementsInstaller path="node" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Node, NodeHeader, NodeTitle, NodeDescription, NodeAction, NodeContent, NodeFooter } from "@/components/ai-elements/node";
|
|
```
|
|
|
|
```tsx
|
|
<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 />`
|
|
|
|
<TypeTable
|
|
type={{
|
|
handles: {
|
|
description: 'Configuration for connection handles. Target renders on the left, source on the right.',
|
|
type: '{ target: boolean; source: boolean; }',
|
|
},
|
|
className: {
|
|
description: 'Additional CSS classes to apply to the node.',
|
|
type: 'string',
|
|
},
|
|
'...props': {
|
|
description: 'Any other props are spread to the underlying Card component.',
|
|
type: 'ComponentProps<typeof Card>',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### `<NodeHeader />`
|
|
|
|
<TypeTable
|
|
type={{
|
|
className: {
|
|
description: 'Additional CSS classes to apply to the header.',
|
|
type: 'string',
|
|
},
|
|
'...props': {
|
|
description: 'Any other props are spread to the underlying CardHeader component.',
|
|
type: 'ComponentProps<typeof CardHeader>',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### `<NodeTitle />`
|
|
|
|
<TypeTable
|
|
type={{
|
|
'...props': {
|
|
description: 'Any other props are spread to the underlying CardTitle component.',
|
|
type: 'ComponentProps<typeof CardTitle>',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### `<NodeDescription />`
|
|
|
|
<TypeTable
|
|
type={{
|
|
'...props': {
|
|
description: 'Any other props are spread to the underlying CardDescription component.',
|
|
type: 'ComponentProps<typeof CardDescription>',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### `<NodeAction />`
|
|
|
|
<TypeTable
|
|
type={{
|
|
'...props': {
|
|
description: 'Any other props are spread to the underlying CardAction component.',
|
|
type: 'ComponentProps<typeof CardAction>',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### `<NodeContent />`
|
|
|
|
<TypeTable
|
|
type={{
|
|
className: {
|
|
description: 'Additional CSS classes to apply to the content.',
|
|
type: 'string',
|
|
},
|
|
'...props': {
|
|
description: 'Any other props are spread to the underlying CardContent component.',
|
|
type: 'ComponentProps<typeof CardContent>',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### `<NodeFooter />`
|
|
|
|
<TypeTable
|
|
type={{
|
|
className: {
|
|
description: 'Additional CSS classes to apply to the footer.',
|
|
type: 'string',
|
|
},
|
|
'...props': {
|
|
description: 'Any other props are spread to the underlying CardFooter component.',
|
|
type: 'ComponentProps<typeof CardFooter>',
|
|
},
|
|
}}
|
|
/>
|