Create the project foundation:npm create vite@latest quantum-d12 -- --template react
Move into the new folder and install the basics: cd quantum-d12 npm install
Install the icons we used: npm install lucide-react
Install and configure Tailwind CSS (for the styling):
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
(You'll need to quickly configure your tailwind.config.js and index.css files according to Tailwind's standard React setup guide).
Open the src/App.jsx file in your code editor (like VS Code), delete what's there, and paste the entire code from our Canvas right into it.
Launch it: npm run dev
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.