Artifact
betaA titled frame for something the model produced, with preview and code panes that slide along one axis and a copy action.
- AI
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add ai-artifactNo npm packages are needed beyond what Dowel already requires.
import { Artifact } from "@/components/ui/ai-artifact";Default
Gallery
Right To Left
<Artifact>
| Prop | Type | Default |
|---|---|---|
title (required)Names the artifact so it can be referred to in conversation. | ReactNode | — |
actionsExtra toolbar actions, after the pane switch. | ReactNode | — |
codeThe raw form — source, JSON, markup. Pre-highlighted markup is fine. | ReactNode | — |
copyValuePlain text for the clipboard. Omit to hide the copy action. | string | — |
defaultPaneInitial pane when uncontrolled. | ArtifactPane | "preview" |
labelsTab labels. | Partial<Record<ArtifactPane, string>> | — |
onPaneChange | (pane: ArtifactPane) => void | — |
paneControlled pane. | ArtifactPane | — |
previewThe rendered form. | ReactNode | — |
Plus every attribute of <div> except title.
A group named by its title. With both panes it is a real tablist (arrow keys move between Preview and Code, each panel focusable and named by its tab); with one code pane, the scrolling source is a focusable region named by the title. Copying announces success and failure through Copy Button. The pane slide mirrors in right-to-left layouts, never plays on mount, and stops under reduced motion.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes