An AI-generated artifact shown inline — header (type tile + title + status), a type-specific preview, metadata, the originating prompt, and an Open / Copy / Download / Regenerate action bar.
Loading demo: artifact-viewer-real-world
npx sdaia-ui@latest add artifact-viewer
import { ArtifactViewer } from "sdaia-ui"1<ArtifactViewer2type="code"3title="ai-message.tsx"4subtitle="TypeScript · 1.2 KB"5code={code}6version="v3"7status="Ready"8prompt="Prompt: Generate the AI message status helper."9onOpen={() => openArtifact()}10onCopy={() => copy(code)}11onExpand={() => setFullscreen(true)}12/>
An AI-generated code snippet rendered in the dark code preview.
Loading demo: artifact-viewer-code
A downloadable file with a type tile, name and size.
Loading demo: artifact-viewer-file
A drafted document with a formatted heading and body preview.
Loading demo: artifact-viewer-document
A generated image shown in the image preview.
Loading demo: artifact-viewer-image
The expanded two-pane viewer — a Canvas preview plus a Details sidebar.
Loading demo: artifact-viewer-fullscreen-code
Brand style — a high-emphasis, brand-coloured card surface.
Loading demo: artifact-viewer-brand
Outline style — a bordered, transparent card surface.
Loading demo: artifact-viewer-outline
Prop | Type | Default | Required |
|---|---|---|---|
mode | 'inline' | 'fullscreen' | 'inline' | optional |
type | 'code' | 'file' | 'document' | 'image' | 'code' | optional |
variant | 'neutral' | 'brand' | 'outline' | 'neutral' | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
title | ReactNode | — | required |
subtitle | ReactNode | — | optional |
status | ReactNode | 'Ready' | optional |
statusState | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'success' | optional |
version | ReactNode | — | optional |
code | string | — | optional |
imageSrc | string | — | optional |
imageCaption | ReactNode | — | optional |
documentHeading | ReactNode | — | optional |
documentBody | ReactNode | — | optional |
preview | ReactNode | — | optional |
meta | ArtifactViewerMetaRow[] | — | optional |
prompt | ReactNode | — | optional |
onOpen / onCopy / onDownload / onRegenerate / onMore | () => void | — | optional |
onExpand | () => void | — | optional |
onClose | () => void | — | optional |