Artifact

The inline card that stands for an artifact in a message. It shows what is being written while it streams and opens the artifact panel.

Markdown

On this page

An agent writes a React component, then revises it. The panel follows each version.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/artifact.json

Usage

tsx

import { Artifact } from "@/components/ui/chatcn/artifact"

<Artifact
  title="Usage meter"
  label="React component"
  version={2}
  status={streaming ? "streaming" : "done"}
  content={code}
  open={open}
  onOpenChange={setOpen}
/>

Pass content and the card counts lines live and draws a minimap of the first lines, so the reader sees the shape of the code before opening it. The demo above also shows the pairing most apps want: open the panel by itself when the first artifact starts, follow new versions, and leave focus in the conversation.

Examples

Every state

Writing, done, open, stopped, each kind and a long title.

Props

Prop	Type	Notes
`title`	`ReactNode`	Truncates on one line
`kind`	`"code" \| "document" \| "html" \| "image"`	Picks the icon and default label
`label`	`ReactNode`	Type label, for example React component
`version`	`number`	Shown as `v2` from the second version on
`status`	`"streaming" \| "done" \| "error"`	Writing with a spinner, the summary, or the error
`content`	`string`	Drives the line count and the minimap
`lineCount`	`number`	Override the count
`imageSrc`	`string`	Thumbnail for image artifacts
`errorText`	`ReactNode`	Shown when `status` is `error`
`open`, `onOpenChange`		Whether this artifact is showing in the panel

Keyboard

Key	Action
`Enter`, `Space`	Open or close the artifact in the panel

Accessibility

The card is one button with aria-expanded. Its name is the title and the summary line.
Completion is announced once in a polite live region, never per line.
Errors pair the red icon with words, so color is never the only signal.

Motion

The status glyph swaps with the 150 ms blur crossfade, so writing to done reads as one object changing.
Open and Close share one footprint and crossfade their icons; nothing shifts.
Press scales to 0.99, the large-surface value. Hover changes the shadow only.