Attempt to get Claude artifact https://gist.github.com/simonw/76ef926312093333b48093da6def59fc running locally.
Created basically using the guide on https://ui.shadcn.com/docs/installation/vite
I needed to install the shadcn components (slider, button, card) using shadcn commands.
Except I needed to move the shadcn components from top level @ folder where they were installed by default into the src folder. Probably a config setting on initializing shadcn could have fixed this.
I also needed to clear out index.css and replace it with the @tailwind properties from https://tailwindcss.com/docs/guides/vite to get tailwindcss running.
I set it up as a tsx project event though the Claude generated code is jsx. So to build I had to remove the tsx checks. Possibly I could also relabel to App.tsx toApp.jsx but I think I'd need to configure some other settings.
The styles are also not quite right, could have to do with the shadcn theme.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh