React Setup

Install and configure React.

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}
Was this article helpful?