Artifact

Frames generated content with header actions, an optional scroll region and a close request.

Preview

Review notes
Draft 1

The request handler now retains the original draft when a send fails.

Add a test for a rejected request and confirm that the retry uses the same content.

Local draft · Changes stay in this example

In action

Review and revise a generated draft

Draft review notes
Draft 1

The request handler now retains the original draft when a send fails.

Add a test for a rejected request and confirm that the retry uses the same content.

Local draft · Changes stay in this example

When to use

Use it for

  • Generated documents, code or previews with actions placed in their header.
  • Pass onClose to request dismissal; the application controls visibility and restores focus to the opener.
  • Set maxHeight to create a keyboard-reachable scroll region for long content.

Avoid

  • Treating the container as a renderer or code execution environment.
  • Removing the view after close without returning focus to a useful control.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { Artifact, Button } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/artifact.

Copy the source

npx @noorddev/vlak-cli add artifact

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/artifact.json

Installs the same source through the shadcn CLI.

React

import { Artifact, Button } from "@noorddev/vlak-react";

export function ReviewArtifact({ onRevise }: { onRevise: () => void }) {
  return <Artifact title="Review notes" description="Draft 1" maxHeight="20rem" actions={<Button variant="subtle" onClick={onRevise}>Revise draft</Button>} footer="Local draft">
    <p>Retain the original draft when sending fails.</p>
  </Artifact>;
}

See the integration example to compose these components with your application's model and data.

Props

Artifact

Generated content with header actions, a close request and an optional scroll region.

PropTypeDefaultDescription
titlerequiredReactNode
descriptionReactNode
actionsReactNode
footerReactNode
onClose() => voidRequests closing; the application owns visibility and focus restoration.
closeLabelstring"Close artifact"
maxHeightProperty.MaxHeight<string | number>Optional height cap for long generated content.

Also accepts Omit<HTMLAttributes<HTMLElement>, "title">.

The ref reaches HTMLElement.

Keyboard

KeysDoes
TabTab reaches supplied actions, the labelled close control and a height-limited content region.
Enter, SpaceEnter or Space activates the focused button.

Accessibility

  • A section is named by its visible title, unless a custom accessible name is supplied.
  • The close control uses an icon, a descriptive accessible label and a 44px target.
  • Content remains mounted until the application accepts the close request.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak
import "@noorddev/vlak/css";
<section class="rs-artifact" aria-labelledby="artifact-title"><header class="rs-artifact-header"><div class="rs-artifact-heading"><span class="rs-artifact-title" id="artifact-title">Review notes</span><div class="rs-artifact-description">Draft 1</div></div></header><div class="rs-artifact-content"><p>Retain the original draft when sending fails.</p></div><footer class="rs-artifact-footer">Local draft</footer></section>

Classes

.rs-artifact.rs-artifact-header.rs-artifact-heading.rs-artifact-title.rs-artifact-description.rs-artifact-actions.rs-artifact-content.rs-artifact-footer

Depends on

ButtonIcons

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas