Initial commit

2025-11-30 08:41:51 +08:00
commit 43ed648a28
43 changed files with 8444 additions and 0 deletions
--- a/docs/components/node.md
+++ b/docs/components/node.md
@@ -0,0 +1,151 @@
+# 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>',
+  },
+}}
+/>