169 lines
3.6 KiB
Markdown
169 lines
3.6 KiB
Markdown
# 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>',
|
|
},
|
|
}}
|
|
/>
|