Vite

New project

1. Create a Vite React app

   npm create vite@latest my-app -- --template react-ts
   cd my-app
   npm install

2. Install Tailwind v4

   npm install tailwindcss @tailwindcss/vite

   Add the Tailwind Vite plugin to vite.config.ts:

   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react";
   import tailwindcss from "@tailwindcss/vite";
   
   export default defineConfig({
     plugins: [react(), tailwindcss()],
   });

   Replace the contents of src/index.css with:

   @import "tailwindcss";

3. Add path aliases

   Install @types/node and configure the @ alias in both vite.config.ts and tsconfig.json:

   npm install -D @types/node

   // vite.config.ts
   import path from "path";
   // ...
   export default defineConfig({
     plugins: [react(), tailwindcss()],
     resolve: {
       alias: { "@": path.resolve(__dirname, "./src") },
     },
   });

   // tsconfig.json
   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": { "@/*": ["./src/*"] }
     }
   }

4. Initialise shadcn

   npx shadcn@latest init -y -b base -p nova

5. Add the Layout registry

   // components.json
   {
     "registries": {
       "@layout": "https://ui.layout.design/r/{name}.json"
     }
   }

6. Install the theme and a component

   npx shadcn add @layout/theme-layout
   npx shadcn add @layout/button