How to Initialize a React Project Using Vite and shadcn/ui
Tutorial

How to Initialize a React Project Using Vite and shadcn/ui

Sagar Yenkure
February 26th, 2025

In this comprehensive guide, we'll walk through the process of setting up a modern React project using Vite as our build tool and shadcn/ui for beautiful, accessible components.

Prerequisites

Before we begin, make sure you have the following installed:

  • Node.js (version 14.18+ or 16+)
  • npm (comes with Node.js)
  • A code editor (VS Code recommended)

Step 1: Create a New Vite Project

First, let's create a new Vite project with React and TypeScript support. Open your terminal and run:

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
Click to Copy

Step 2: Install Dependencies

Install the project dependencies:

npm install
Click to Copy

Step 3: Add Tailwind CSS

shadcn/ui requires Tailwind CSS. Let's set it up:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Click to Copy

Update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Click to Copy

Add Tailwind directives to your ./src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Click to Copy

Step 4: Install and Configure shadcn/ui

Install shadcn/ui CLI

npm install -D @shadcn/ui
Click to Copy

Initialize shadcn/ui:

npx shadcn-ui init
Click to Copy

During initialization, you'll be asked several questions. Here are the recommended answers:

  • Would you like to use TypeScript? Yes
  • Which style would you like to use? Default
  • Which color would you like to use as base color? Slate
  • Where is your global CSS file? src/index.css
  • Do you want to use CSS variables? Yes
  • Where is your tailwind.config.js located? tailwind.config.js
  • Configure the import alias for components? Yes
  • Configure the import alias for utils? Yes

Step 5: Start Using Components

Now you can start installing and using shadcn/ui components. For example, to add a button:

npx shadcn-ui add button
Click to Copy

Use it in your code:

import { Button } from "@/components/ui/button"

function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
Click to Copy

Best Practices

  1. Project Structure: Keep your components organized in feature-based folders
  2. TypeScript: Utilize TypeScript for better type safety and developer experience
  3. Component Library: Install components as needed rather than all at once
  4. Styling: Use Tailwind's utility classes for custom styling
  5. State Management: Start with React's built-in useState and useContext before adding external libraries

Conclusion

You now have a modern React development environment set up with Vite and shadcn/ui! This combination provides an excellent foundation for building fast, beautiful, and maintainable web applications.

Remember to check the official documentation for:

Happy coding! 🚀