Artifact
Something the agent made, in its own panel with actions.
Artifact presents what an agent produced (a document, a component, a chart) in a panel beside the conversation, with a header of actions and a full-screen toggle.
Preview
Q4 billing changes
Tax is now computed in one helper and applied only to customers with a tax ID. Totals match across the API and PDFs.
- Reverse-charge VAT for B2B customers
- Cent-accurate rounding
- 22 billing tests, all passing
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/artifact.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/artifact.
Builds on: motion
Usage
import { Artifact } from "@/components/ui/artifact";
<Artifact kind="Document" title="Q4 notes" onClose={close}>…</Artifact>Motion
Slides in from the side once.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Artifact
| Prop | Type | Default | Description |
|---|---|---|---|
| title · kind | ReactNode · string | — | Header. |
| onClose · onDownload | () => void | — | Actions. |
| actions | ReactNode | — | Extra buttons. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: ai artifact panel · claude artifacts ui · generated content panel · side panel react · shadcn ai artifact