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.

See scripts/artifact.tsx for this example.

npx ai-elements@latest add artifact

• 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

See scripts/artifact.tsx for this example.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Any other props are spread to the underlying div element.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Any other props are spread to the underlying div element.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLParagraphElement>	-	Any other props are spread to the underlying paragraph element.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLParagraphElement>	-	Any other props are spread to the underlying paragraph element.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Any other props are spread to the underlying div element.

Prop	Type	Default	Description
tooltip	string	-	Tooltip text to display on hover.
label	string	-	Screen reader label for the action button.
icon	LucideIcon	-	Lucide icon component to display in the button.
...props	React.ComponentProps<typeof Button>	-	Any other props are spread to the underlying shadcn/ui Button component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof Button>	-	Any other props are spread to the underlying shadcn/ui Button component.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Any other props are spread to the underlying div element.