Create project
Start by creating a new React project using vite:
1npm create vite@latest
Add Tailwind and its configuration
Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:
1npm install -D tailwindcss postcss autoprefixer 2 3npx tailwindcss init -p
Edit tsconfig.json
Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error
1"baseUrl": ".", 2"paths": { 3 "@/*": ["./src/*"] 4}
Update vite.config.ts
Add the code below to the vite.config.ts so your app can resolve paths without error
1# (so you can import "path" without error) 2npm i -D @types/node
1import path from "path"; 2import react from "@vitejs/plugin-react"; 3import { defineConfig } from "vite"; 4 5export default defineConfig({ 6 plugins: [react()], 7 resolve: { 8 alias: { 9 "@": path.resolve(__dirname, "./src"), 10 }, 11 }, 12});
Run the CLI
Run the shadcn-ui init command to setup your project:
1npx shadcn-ui@latest init
Configure components.json
You will be asked a few questions to configure components.json:
1Would you like to use TypeScript (recommended)? no / yes 2Which style would you like to use? › Default 3Which color would you like to use as base color? › Slate 4Where is your global CSS file? › › src/index.css 5Do you want to use CSS variables for colors? › no / yes 6Where is your tailwind.config.js located? › tailwind.config.js 7Configure the import alias for components: › @/components 8Configure the import alias for utils: › @/lib/utils 9Are you using React Server Components? › no / yes (no)
That's it
You can now start adding components to your project.
1npx shadcn-ui@latest add button
The command above will add the Button component to your project. You can then import it like this:
1import { Button } from "@/components/ui/button"; 2 3export default function Home() { 4 return ( 5 <div> 6 <Button>Click me</Button> 7 </div> 8 ); 9}