AI & AgentsPro

Artifact Panel

The side panel for what the agent made — code or a document — with versions, copy and download.

Usage

tabs.tsxCode · edited by Nova 2 min ago

1export function TabsList({ className, ...props }) {
2  const ref = useRovingFocus({ orientation })
3  return (
4    <div
5      ref={ref}
6      role="tablist"
7      aria-orientation={orientation}
8      {...props}
9    />
10  )
11}

Installation

bash

npm install @wunderui/react

Then import what you need:

tsx

import { ArtifactPanel } from "@wunderui/react"

Examples

Code

Line numbers and versions.

tabs.tsxCode · edited by Nova 2 min ago

1export function TabsList({ className, ...props }) {
2  const ref = useRovingFocus({ orientation })
3  return (
4    <div
5      ref={ref}
6      role="tablist"
7      aria-orientation={orientation}
8      {...props}
9    />
10  )
11}

Document

A written draft instead of code.

Tabs v2 release notesDocument · drafted by Writer

Tabs v2

Tabs now move focus with the arrow keys, in both orientations. Home and End jump to the first and last tab.

What changed

Roving focus with a new useRovingFocus hook
aria-orientation on vertical tab lists
7 new tests, all passing

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Artifact side panel

What the assistant wrote opens beside the chat, with its versions, copy and download.

Saved-card copy specDocument · Nova, 2 min ago

Payment step

The saved card is the default path. Changing it stays one quiet link away.

Strings

Button: “Pay $128.40 with Visa •••• 4242”
Link: “Change payment method”
Helper: “Saved Sep 12 · expires 08/28”

API Reference

Prop	Type	Default
title / meta	ReactNode	—
versions / version / onVersionChange	string[] / string / (v) => void	no switch
code	string	document view
children	ReactNode	the document
onCopy / onDownload / onClose	() => void	button hidden

PreviousApproval Card NextChain of Thought