Installing shadcn/ui with Vite, React, TypeScript, and Tailwind CSS v4 using pnpm.

A quick walkthrough for manually spinning up a new Vite + React + TypeScript project with Tailwind CSS v4 and shadcn/ui. Hopefully this setup guide will help newer users understand the configuration alias structure and paths required for shadcn/ui to properly function, and give a step forward towards using other products with shadcn/ui like TanStack router and TanStack table. For an automated setup, please refere to the official shadcn/ui documentation. Tech stack: Vite, React, TypeScript, Tailwind CSS v4, shadcn/ui, pnpm 1. Create a Vite + React + TypeScript project pnpm create vite@latest my-app When prompted, select: - Framework: React - Variant: TypeScript - Linter: choose whichever you prefer (e.g. ESLint) - Confirm to install dependencies Then move into the project and install: cd my-app pnpm install Start the dev server: pnpm dev Your project should now be running at http://localhost:5173. 2. Install Tailwind CSS v4 using the Vite plugin pnpm add tailwindcss @tailwindcss/vite 3. Configure folder aliases Open vite.config.ts and add the Tailwind plugin plus an alias for the ./src folder: import react from '@vitejs/plugin-react' import { defineConfig } from 'vite' import tailwindcss from "@tailwindcss/vite"; import { fileURLToPath, URL } from "node:url"; // https://vite.dev/config/ export default defineConfig({ resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)), }, }, plugins: [react(), tailwindcss()], }) Open tsconfig.json and add the compiler options: { "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ], "compilerOptions": { "paths": { "@/": ["./src/"] } } } Open tsconfig.app.json and add the same path alias: "paths": { "@/": ["./src/"] } 4. Add Tailwind to your CSS Open src/index.css , delete everything in it, and add the Tailwind import: @import "tailwindcss"; To confirm the install worked, drop this into App.tsx : Tailwind Ready 5. Install shadcn/ui pnpm dlx shadcn@latest init 6. Add a component pnpm dlx shadcn@latest add button When prompted, choose the Base style and any color preset you like. This automatically creates a src/components/ui and a src/components/lib folder. 7. Wire it up in App.tsx import { Button } from "@/components/ui/button" function App() { return ( <> Tailwind Ready Hello Button ) } export default App That's it, you now have a Vite + React + TypeScript project running Tailwind CSS v4 and shadcn/ui, ready for building out real components. Top comments (0)