Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA panel for content an assistant generates, with Preview and Code tabs, version stepping, copy, download and a streaming state.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { ArtifactPanel } from "@/components/ui/artifact-panel"<ArtifactPanel
title="Counter button"
kind="React component"
code={code}
filename="counter.tsx"
language="tsx"
versions={3}
>
<Counter />
</ArtifactPanel>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Name of the generated item. Also the panel's accessible name. |
kind | string | - | Kind of artifact, shown under the title. |
icon | ReactNode | - | Icon in the header tile. |
code | string | - | Source text for the Code tab, Copy and Download. |
filename | string | - | Download file name and code header label. |
language | string | - | Language label for the code header. |
children | ReactNode | - | The rendered result, shown in the Preview tab. |
versions | number | 1 | Number of versions. More than one adds previous and next buttons. |
version | number | - | Shown version, starting at 1 (controlled). Defaults to the latest. |
onVersionChange | (version: number) => void | - | Called when the version changes. |
streaming | boolean | false | Shows a progress edge and caret, and disables copy, download and version buttons. |
defaultTab | "preview" | "code" | "preview" | Tab shown first. |
onClose | () => void | - | Adds a close button. |
onCopy | () => void | - | Called after the code was copied. |
actions | ReactNode | - | Extra header buttons, placed before Copy. |
previewClassName | string | - | Classes for the preview canvas. |
Also accepts all <section> props.
children and code are given. With only one, that view is shown on its own.className="h-full") so the tab content scrolls inside it.