Artifact
The Artifact component provides a structured container for displaying generated content like code, documents, or other outputs with built-in header actions.
Dijkstra's Algorithm Implementation
Updated 1 minute ago
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Props
Artifact
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Child components to render |
class | string | - | Additional CSS classes to apply to the container |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ArtifactHeader
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Child components to render (typically title, description, and actions) |
class | string | - | Additional CSS classes to apply to the header |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ArtifactTitle
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Title text content |
class | string | - | Additional CSS classes to apply to the title |
...restProps | HTMLAttributes<HTMLParagraphElement> | - | All other paragraph props are supported |
ArtifactDescription
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Description text content |
class | string | - | Additional CSS classes to apply to the description |
...restProps | HTMLAttributes<HTMLParagraphElement> | - | All other paragraph props are supported |
ArtifactActions
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Child ArtifactAction components to render |
class | string | - | Additional CSS classes to apply to the actions container |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
ArtifactAction
| Prop | Type | Default | Description |
|---|---|---|---|
tooltip | string | - | Tooltip text to display on hover |
label | string | - | Accessible label for screen readers (falls back to tooltip if not provided) |
icon | typeof Icon | - | Lucide icon component to render |
children | Snippet | - | Custom content to render (used if icon is not provided) |
class | string | - | Additional CSS classes to apply to the button |
variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'ghost' | Visual style variant of the button |
size | 'default' | 'sm' | 'lg' | 'icon' | 'sm' | Size of the button |
...restProps | HTMLButtonAttributes | HTMLAnchorAttributes | - | All other button/anchor props are supported |
ArtifactClose
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Custom close icon (defaults to X icon if not provided) |
class | string | - | Additional CSS classes to apply to the button |
variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'ghost' | Visual style variant of the button |
size | 'default' | 'sm' | 'lg' | 'icon' | 'sm' | Size of the button |
...restProps | HTMLButtonAttributes | HTMLAnchorAttributes | - | All other button/anchor props are supported |
ArtifactContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Content to render inside the artifact |
class | string | - | Additional CSS classes to apply to the content container |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |