Artifact
Frames something an agent produced, such as a table or a chart, under a title bar with its actions.
| Account | Stage | Value | Risk |
|---|---|---|---|
| Acme Corp | Negotiation | $540K | High |
| Northwind | Proposal | $212K | Medium |
| Globex | Discovery | $98K | Low |
Configurations
Supported configurations for this component.
Configurations
3 examplesFull title bar
| Account | Stage | Value | Risk |
|---|---|---|---|
| Acme Corp | Negotiation | $540K | High |
| Northwind | Proposal | $212K | Medium |
| Globex | Discovery | $98K | Low |
Title and one action
| Account | Stage | Value | Risk |
|---|---|---|---|
| Acme Corp | Negotiation | $540K | High |
| Northwind | Proposal | $212K | Medium |
| Globex | Discovery | $98K | Low |
No actions
| Account | Stage | Value | Risk |
|---|---|---|---|
| Acme Corp | Negotiation | $540K | High |
| Northwind | Proposal | $212K | Medium |
| Globex | Discovery | $98K | Low |
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
Artifact
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | ArtifactHeader, then ArtifactContent. |
| className | string | - | Extra classes merged onto the frame. |
| style | React.CSSProperties | - | Inline styles merged onto the frame. |
ArtifactHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | PhosphorIcon | - | Leading glyph naming the kind of thing the artifact is, in text.muted at 16px (the 12px title's rung on the icon-label ladder). |
| children | React.ReactNode | - | ArtifactTitle and ArtifactDescription, stacked in the flexible column; an ArtifactActions child is lifted out to the trailing end. |
| className | string | - | Extra classes merged onto the bar. |
| style | React.CSSProperties | - | Inline styles merged onto the bar. |
ArtifactText
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Content rendered inside the component. |
| className | string | - | Extra classes merged onto the line. |
| style | React.CSSProperties | - | Inline styles merged onto the line. |
ArtifactAction
| Prop | Type | Default | Description |
|---|---|---|---|
| labelreq | string | - | REQUIRED. The action's name: the button's aria-label and the tooltip's text. |
| iconreq | PhosphorIcon | - | REQUIRED. Phosphor glyph, drawn at the sm rung (16px) by IconButton. |
| tooltip | boolean | true | Show the label in a Tooltip under the button on hover and focus. It portals out of the Artifact frame (which clips) and stays inline anywhere else, such as a DrawerHeader. |
| hideBelow | 'sm'|'md' | - | Hide the action below that breakpoint. Only for a secondary action that stays reachable elsewhere (the expanded view keeps it). |
| onClick | (e: React.MouseEvent<HTMLButtonElement>) => void | - | What the action does. An action with no handler is a dead control: leave it out instead. |
| disabled | boolean | - | When true, disables the control. |
| className | string | - | Extra classes merged onto the button. |
| style | React.CSSProperties | - | Inline styles merged onto the button. |
ArtifactClose
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | 'Close' | The button's aria-label and tooltip text. |
AI Canvas