React AI Artifact

You know that panel Claude uses to show generated code or documents? This component lets you build exactly that. It's a composable artifact viewer where you can display pretty much anything your AI generates—code snippets, markdown docs, SVGs, HTML previews, you name it. The API is straightforward: wrap everything in Artifact, add an ArtifactHeader with your title, throw in some ArtifactActions for copy/download buttons, and dump your content into ArtifactContent. It handles all the boring stuff like scroll overflow, close buttons, and tooltips. Built on shadcn/ui so it just works with your existing setup. We use it for code generation previews, document viewers, and basically anywhere we need to show AI output separately from the chat. Plays nice with Vercel AI SDK streaming too—just update the content as tokens come in.

Artifact preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/artifact.json

npx shadcn@latest add https://www.shadcn.io/registry/artifact.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/artifact.json

bunx shadcn@latest add https://www.shadcn.io/registry/artifact.json

Related Components

FAQ