Artifact card
The small card or chip inside a reply that points to an artifact and opens it.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/artifact-card-card.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/artifact-card-card.json
Usage & API
Example
import { ArtifactCard } from "@/components/ai/artifact-card-card"
<ArtifactCard
title="…"
kind="…"
version={1}
onOpen={() => {}}
/>Props ArtifactCard
| Prop | Type & description | Required |
|---|---|---|
title | string | Required |
kind | string | Required |
version | number | Required |
progress | number0 to 1 while the artifact is still being written. | Optional |
open | boolean | Optional |
onOpen | () => void | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Card is the wide row, capped around 400 pixels. The sample sits it under a reply to Can you add the coffee origins under the hero? The assistant says it added three origins and moved the order button into the nav, then renders Landing page, kind Website, version 3. Progress climbs from 0 to 1 over about two and a half seconds. While it climbs, the thumbnail blocks appear in order and the row reads Writing with a percent. When it finishes, the line reads Website · v3 · Click to open, and the button enables. Pressing it toggles open, swaps that line to Open in panel, and turns the border and the arrow amber. Pressing again clears it. There is no separate close control.
Example
import { ArtifactChip } from "@/components/ai/artifact-card-chip"
<ArtifactChip
title="…"
kind="page"
version={1}
meta="…"
onOpen={() => {}}
/>Props ArtifactChip
| Prop | Type & description | Required |
|---|---|---|
title | string | Required |
kind | "page" | "code" | Required |
version | number | Required |
meta | string | Required |
open | boolean | Optional |
onOpen | () => void | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Inline chip sits in running text. The button is short, with an icon, the title and a version badge, and it uses a pressed style while open. The sample has two. The first sentence says the origins row moved into Landing page, a page chip at version 3 whose meta is Website, 3 sections. After a short delay a second sentence says the prices now live in prices.ts, a code chip at version 1 whose meta is TypeScript, 24 lines. Hover or focus shows the tooltip above the chip: a mini page or mini code, then the title and the meta. Click toggles which chip is open. Only one stays open, because the sample stores a single key. The tooltip is a description of the chip, not a second button.
Choosing a layout
Use the card when the reply produced one main artifact and the person should see that it is still being written, then open it. The progress fraction is the reason to pick the card over the chip. Drive it from the same stream you use to fill the artifact panel, and ignore presses until it reaches 1, which the button already enforces by disabling itself. Use the chip when the reply mentions one or more artifacts inside a sentence and a full row would break the paragraph. A message can contain several chips. The sample toggles which one is open.
Neither one shows the preview, the source, or the version list. That is the artifact panel, or a web preview if the thing to inspect is a page at several widths. A code block is for source that should be read in place, not pointed at. A product mention is a different inline chip: it peeks a product, a price and a retailer, not a file the model wrote. Keep these cards as the pointer, and let the panel do the reading.
Can the wide card be opened while the thumbnail is still filling in?
No. The button is disabled until progress is at least 1, and its accessible name says the title is being written rather than offering Open. The chip has no progress prop, so it can be opened as soon as you render it. If the file is not ready yet, do not render the chip, or keep the person on the card until the write finishes.
Does the thumbnail match the real page?
No. Both drawings are fixed arrangements of blocks, a page sketch on the card and on a page chip, and coloured bars on a code chip. They communicate kind and progress. They do not render the artifact's HTML or source. The live preview belongs on the artifact panel or the website preview, which you open from onOpen.