Intermediate

React Artifacts

React Artifacts are interactive UI components that render live in Claude's browser sandbox. You can see and interact with forms, charts, calculators, and dashboards directly in the Artifact panel — without a local dev environment, build step, or deployment.

What Claude Can Build as a React Artifact

Works well

Forms with validation and submit handling
Data visualisation with charts (bar, line, pie, scatter)
Calculators and interactive tools with state
Dashboards displaying mock or hardcoded data
Multi-step wizards and flow UIs
Drag-and-drop lists and sortable tables
Todo lists, kanban boards, and simple CRUD interfaces
Animated and transition effects

Does not work in the sandbox

External API calls (fetch to third-party URLs is blocked)
File system access (reading/writing local files)
Authentication flows (OAuth, JWT)
Database connections
Node.js server-side code
Arbitrary npm packages not pre-included in the sandbox

Available Libraries in the Sandbox

The React sandbox pre-includes a curated set of libraries you can import without configuration:

React 18 — full React with hooks, context, and refs
Tailwind CSS — utility classes available directly (no config needed)
Recharts — composable charts for data visualisation (BarChart, LineChart, PieChart, etc.)
Lucide React — icon library
shadcn/ui components — pre-built UI components (Button, Card, Input, Select, etc.)
date-fns — date formatting and manipulation

When prompting for a React Artifact, you can explicitly ask Claude to use these: "Use shadcn/ui components for the form inputs and Recharts for the data visualisation."

Prompting for Interactive Components

For well-built interactive components, be specific about behaviour:

Describe the state: "The form should validate that the email field is a valid email address before allowing submission."
Specify user interactions: "Clicking a row in the table should expand it to show additional details."
Define the data shape: "Use this mock data: [paste example]. The chart should plot X against Y."
Describe the layout: "Two-column layout on desktop, stacked on mobile. Left column: filters. Right column: results list."

Limitations to Know

The React sandbox has meaningful constraints to keep in mind:

No live data: The component can only work with data you provide inline (hardcoded arrays, mock data, user input within the component). It cannot fetch from an API.
No persistence: State resets when you reload the preview. No localStorage, no backend. Build prototypes and interactive mockups, not stateful applications.
No routing: Multi-page apps with URL-based routing don't work. Simulate multiple "pages" with state-based conditional rendering instead.
Single component file: The Artifact is a single file. You can define multiple sub-components within it, but you can't split across files.

Typical Workflow

React Artifacts are best used for rapid prototyping and demonstration:

Ask Claude to build the initial component with mock data
Preview it in the Artifact panel — does it look and behave as expected?
Ask Claude to refine: adjust layout, change interaction, update mock data
When happy with the design, download or copy the code to your actual project
In your project, replace the mock data with real API calls and integrate with your routing and auth

Checklist: Do You Understand This?

React Artifacts render live in the browser — forms, charts, dashboards, interactive tools
Available libraries: React 18, Tailwind CSS, Recharts, Lucide, shadcn/ui, date-fns
External API calls, file access, authentication, and arbitrary npm packages are not available in the sandbox
Describe state, interactions, data shape, and layout explicitly for well-structured components
Use React Artifacts for prototyping — download the code and connect to real data/APIs in your actual project