Artifact

The Artifact component provides a structured container for displaying generated content like code, documents, or other outputs with built-in header actions.

Installation

npx ai-elements@latest add 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 />

<ArtifactHeader />

<ArtifactTitle />

<ArtifactDescription />

<ArtifactActions />

<ArtifactAction />

<ArtifactClose />

<ArtifactContent />