Source: https://ai-sdk.dev/elements/components/artifact

Vercel

Slash Forward

Sparkles

AI SDK

Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway

Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel

Vibe coding

Artifact

A container component for displaying generated content like code, documents, or other outputs with built-in actions.

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

Preview

Code

Dijkstra's Algorithm Implementation

Updated 1 minute ago

RunCopyRegenerateDownloadShare

Installation

---

AI Elements

shadcn CLI

Manual

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

Preview

Code

Dijkstra's Algorithm Implementation

Updated 1 minute ago

RunCopyRegenerateDownloadShare

Props

---

<Artifact />

Prop

Type

...props?React.HTMLAttributes<HTMLDivElement>

<ArtifactHeader />

Prop

Type

...props?React.HTMLAttributes<HTMLDivElement>

<ArtifactTitle />

Prop

Type

...props?React.HTMLAttributes<HTMLParagraphElement>

<ArtifactDescription />

Prop

Type

...props?React.HTMLAttributes<HTMLParagraphElement>

<ArtifactActions />

Prop

Type

...props?React.HTMLAttributes<HTMLDivElement>

<ArtifactAction />

Prop

Type

tooltip?string

label?string

icon?LucideIcon

...props?React.ComponentProps<typeof Button>

<ArtifactClose />

Prop

Type

...props?React.ComponentProps<typeof Button>

<ArtifactContent />

Prop

Type

...props?React.HTMLAttributes<HTMLDivElement>

Toolbar

A styled toolbar component for React Flow nodes with flexible positioning and custom actions. Web Preview

A composable component for previewing the result of a generated UI, with support for live examples and code display.

On this page

Installation Features Examples With Code Display Props <Artifact /> <ArtifactHeader /> <ArtifactTitle /> <ArtifactDescription /> <ArtifactActions /> <ArtifactAction /> <ArtifactClose /> <ArtifactContent />

GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat