Shadcn UI is a modern React + Tailwind component library that gives you full control by letting you copy and customize components directly. This guide shows how to integrate Shadcn UI into a React.js project using Vite for a fast and efficient setup.

Step 1: Create a New Vite + React Project

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

This sets up a Vite project with the React template (JavaScript). If you prefer TypeScript, replace react with react-ts in the template flag.

Step 2: Install and Configure Tailwind CSS

Shadcn UI relies on Tailwind CSS for styling. Install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This creates two configuration files: tailwind.config.js and postcss.config.js. Update tailwind.config.js to include the paths for your project files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Next, update src/index.css to include Tailwind's directives. Replace its content with:

@import "tailwindcss";

Step 3: Configure Vite for Path Aliases

To simplify imports, configure Vite to use the @ alias for the src directory. Update vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

Install @types/node to avoid errors with the path module:

npm install -D @types/node

For JavaScript projects, create a jsconfig.json file in the root directory to enable path alias support in your IDE:

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

Step 4: Initialize Shadcn UI

Install the Shadcn UI CLI and initialize it in your project:

npx shadcn@latest init

Follow the prompts to configure components.json. A typical configuration might look like this:

• Would you like to use TypeScript? No (for JavaScript projects)
• Which style would you like to use? New York
• Which color would you like to use as base color? Zinc
• Where is your global CSS file? src/index.css
• Where is your tailwind.config.js located? tailwind.config.js
• Configure the import alias for components: @/components
• Configure the import alias for utils: @/lib/utils
• Are you using React Server Components? No
• Do you want to use CSS variables for colors? Yes

This creates a components.json file and sets up the necessary dependencies, including tailwindcss-animate, class-variance-authority, clsx, tailwind-merge, and lucide-react.

Step 5: Add a Shadcn UI Component

To test the setup, add a Button component using the Shadcn CLI:

npx shadcn@latest add button

This creates a src/components/ui/button.jsx file. You can now use the Button component in your application.
For example, update src/App.jsx:

import { Button } from '@/components/ui/button';

function App() {
  return (
    <div className="flex flex-col justify-center items-center gap-4 min-h-screen">
      <h1 className="text-3-5xl font-bold">Vite + React + Shadcn UI</h1>
      <Button>Primary Button</Button>
      <Button variant="outline">Outline Button</Button>
      <Button variant="destructive">Destructive Button</Button>
    </div>
  );
}

export default App;

Simple Shadcn UI Landing Page

Folder structure of Project

Shadcn UI Landing Page

Project Code

GitHub Link : Simple Shadcn UI Project

Conclusion

Integrating Shadcn UI with React and Vite provides a powerful, flexible, and modern setup for building web applications. By leveraging Vite's speed, Tailwind's utility-first styling, and Shadcn UI's customizable components, developers can create professional-grade UIs with ease. This guide walked you through the setup process, from initializing a Vite project to adding dark mode support. Now, you're ready to build stunning, responsive applications!