# 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>',
  },
}}
/>