Initial commit

2025-11-30 08:41:51 +08:00
commit 43ed648a28
43 changed files with 8444 additions and 0 deletions
--- a/docs/components/artifact.md
+++ b/docs/components/artifact.md
@@ -0,0 +1,168 @@
+# Artifact
+
+URL: /components/artifact
+
+---
+
+title: Artifact
+description: A container component for displaying generated content like code, documents, or other outputs with built-in actions.
+path: elements/components/artifact
+
+---
+
+The `Artifact` component provides a structured container for displaying generated content like code, documents, or other outputs with built-in header actions.
+
+<Preview path="artifact" />
+
+## Installation
+
+<ElementsInstaller path="artifact" />
+
+## Usage
+
+```tsx
+import {
+    Artifact,
+    ArtifactAction,
+    ArtifactActions,
+    ArtifactContent,
+    ArtifactDescription,
+    ArtifactHeader,
+    ArtifactTitle,
+} from "@/components/ai-elements/artifact";
+```
+
+```tsx
+<Artifact>
+    <ArtifactHeader>
+        <div>
+            <ArtifactTitle>Dijkstra's Algorithm Implementation</ArtifactTitle>
+            <ArtifactDescription>Updated 1 minute ago</ArtifactDescription>
+        </div>
+        <ArtifactActions>
+            <ArtifactAction icon={CopyIcon} label="Copy" tooltip="Copy to clipboard" />
+        </ArtifactActions>
+    </ArtifactHeader>
+    <ArtifactContent>{/* Your content here */}</ArtifactContent>
+</Artifact>
+```
+
+## Features
+
+-   Structured container with header and content areas
+-   Built-in header with title and description support
+-   Flexible action buttons with tooltips
+-   Customizable styling for all subcomponents
+-   Support for close buttons and action groups
+-   Clean, modern design with border and shadow
+-   Responsive layout that adapts to content
+-   TypeScript support with proper type definitions
+-   Composable architecture for maximum flexibility
+
+## Examples
+
+### With Code Display
+
+<Preview path="artifact" />
+
+## Props
+
+### `<Artifact />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the underlying div element.',
+    type: 'React.HTMLAttributes<HTMLDivElement>',
+  },
+}}
+/>
+
+### `<ArtifactHeader />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the underlying div element.',
+    type: 'React.HTMLAttributes<HTMLDivElement>',
+  },
+}}
+/>
+
+### `<ArtifactTitle />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the underlying paragraph element.',
+    type: 'React.HTMLAttributes<HTMLParagraphElement>',
+  },
+}}
+/>
+
+### `<ArtifactDescription />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the underlying paragraph element.',
+    type: 'React.HTMLAttributes<HTMLParagraphElement>',
+  },
+}}
+/>
+
+### `<ArtifactActions />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the underlying div element.',
+    type: 'React.HTMLAttributes<HTMLDivElement>',
+  },
+}}
+/>
+
+### `<ArtifactAction />`
+
+<TypeTable
+type={{
+  tooltip: {
+    description: 'Tooltip text to display on hover.',
+    type: 'string',
+  },
+  label: {
+    description: 'Screen reader label for the action button.',
+    type: 'string',
+  },
+  icon: {
+    description: 'Lucide icon component to display in the button.',
+    type: 'LucideIcon',
+  },
+  '...props': {
+    description: 'Any other props are spread to the underlying shadcn/ui Button component.',
+    type: 'React.ComponentProps<typeof Button>',
+  },
+}}
+/>
+
+### `<ArtifactClose />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the underlying shadcn/ui Button component.',
+    type: 'React.ComponentProps<typeof Button>',
+  },
+}}
+/>
+
+### `<ArtifactContent />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Any other props are spread to the underlying div element.',
+    type: 'React.HTMLAttributes<HTMLDivElement>',
+  },
+}}
+/>