web-artifacts-builder

To bundle a React app into a single HTML file for Claude.ai, use a script that inlines all JavaScript, CSS, and assets from your Vite project into one self-contained `bundle.html` file.

Yes, this bundling approach works with shadcn/ui and Tailwind CSS by initializing a React 18 and TypeScript project that pre-configures these dependencies before inlining them into the final artifact.

You need to bundle a React frontend instead of writing plain HTML when your artifact requires routing, state management, or interactive shadcn/ui components that exceed the capabilities of a single-file toy HTML script.

The best way to share a stateful React UI as a Claude artifact is to scaffold a Vite project, develop your UI, and run a bundle script to consolidate all code and assets into a compatible HTML file.

To inline React assets into an HTML file, you need pnpm for package management, parcel for bundling, and html-inline to consolidate the JavaScript and CSS into a single output.

Multi-component React artifacts fail to run in Claude if they rely on external assets or multiple files, which is solved by inlining all JS, CSS, and dependencies into a single HTML file.