gh-nathanonn-claude-skills-ai-elements-claude-skills-ai-elements/docs/components/artifact.md

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.

Installation

Usage

import {
    Artifact,
    ArtifactAction,
    ArtifactActions,
    ArtifactContent,
    ArtifactDescription,
    ArtifactHeader,
    ArtifactTitle,
} from "@/components/ai-elements/artifact";

<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

Props

<Artifact />

<TypeTable type={{ '...props': { description: 'Any other props are spread to the underlying div element.', type: 'React.HTMLAttributes', }, }} />

<ArtifactHeader />

<TypeTable type={{ '...props': { description: 'Any other props are spread to the underlying div element.', type: 'React.HTMLAttributes', }, }} />

<ArtifactTitle />

<TypeTable type={{ '...props': { description: 'Any other props are spread to the underlying paragraph element.', type: 'React.HTMLAttributes', }, }} />

<ArtifactDescription />

<TypeTable type={{ '...props': { description: 'Any other props are spread to the underlying paragraph element.', type: 'React.HTMLAttributes', }, }} />

<ArtifactActions />

<TypeTable type={{ '...props': { description: 'Any other props are spread to the underlying div element.', type: 'React.HTMLAttributes', }, }} />

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

<ArtifactClose />

<TypeTable type={{ '...props': { description: 'Any other props are spread to the underlying shadcn/ui Button component.', type: 'React.ComponentProps', }, }} />

<ArtifactContent />

<TypeTable type={{ '...props': { description: 'Any other props are spread to the underlying div element.', type: 'React.HTMLAttributes', }, }} />