AI Elements

Artifact

Server Component

A framed canvas for generated files, code, or previews.

Import

tsx

import { Artifact } from "@cronus-ui/ui";

bash

npx cronus-ui add artifact

Examples

Generated artifact

A framed canvas for a file the model produced.

landing.tsx

export function Hero() {
  return <h1>Intelligence at scale.</h1>
}

tsx

<Artifact className="w-full max-w-lg">
  <ArtifactHeader>
    <ArtifactTitle>landing.tsx</ArtifactTitle>
  </ArtifactHeader>
  <ArtifactContent>
    <pre className="font-mono text-xs text-fg-secondary">export function Hero() {"{"}
  return &lt;h1&gt;Intelligence at scale.&lt;/h1&gt;
{"}"}</pre>
  </ArtifactContent>
</Artifact>

API Reference

Generated from the component's exported types.

ArtifactProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.

ArtifactHeaderProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.

ArtifactCloseLabels

Prop	Type	Default	Description
`close`*	`string`	—	—

ArtifactCloseProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLButtonElement>`	—	Ref forwarded to the underlying DOM node.
`labels`	`Partial<ArtifactCloseLabels>`	—	Override default English strings.
`variant`	`"ghost" \| "outline" \| "primary" \| "secondary" \| "destructive" \| "link"`	`"ghost"`	Visual variant.
`size`	`"sm" \| "md" \| "lg" \| "icon" \| "icon-sm"`	`"icon-sm"`	Control size.

ArtifactTitleProps

Extends HTMLAttributes<HTMLParagraphElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLParagraphElement>`	—	Ref forwarded to the underlying DOM node.

ArtifactDescriptionProps

Extends HTMLAttributes<HTMLParagraphElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLParagraphElement>`	—	Ref forwarded to the underlying DOM node.

ArtifactActionsProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.

ArtifactActionProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLButtonElement>`	—	Ref forwarded to the underlying DOM node.
`tooltip`	`string`	—	—
`label`	`string`	—	—
`icon`	`LucideIcon`	—	—
`variant`	`"ghost" \| "outline" \| "primary" \| "secondary" \| "destructive" \| "link"`	`"ghost"`	Visual variant.
`size`	`"sm" \| "md" \| "lg" \| "icon" \| "icon-sm"`	`"icon-sm"`	Control size.
`children`	`ReactNode`	—	Contents of the component.

ArtifactContentProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.