web-artifacts-builder

To bundle a React and Tailwind project into a single HTML file, use the provided deterministic workflow scripts to compile and inline all code and assets into a self-contained HTML output.

The best way to build Claude artifacts requiring routing and state management is using a React, Tailwind CSS, and shadcn/ui stack, which provides the necessary modular UI components and state handling for complex workflows.

Yes, you can use shadcn/ui components in a single-file HTML artifact by scaffolding the project with the initialization script and then bundling the component library into one HTML file.

You need Vite to scaffold Claude artifacts because it sets up the React TypeScript environment with Tailwind CSS, path aliases, and theming required to assemble multi-part artifact projects.

You should avoid using this bundling approach for simple single-file HTML or JSX artifacts that do not require state management, routing, or rich UI component libraries.

Your Claude artifact needs a bundler instead of plain HTML to resolve path aliases, compile TypeScript, and inline assets when consolidating complex React component libraries into a single distributable HTML file.