DEV Community

Cover image for How to Use Shadcn UI in Your React + Vite Project
Sudhanshu Gaikwad
Sudhanshu Gaikwad

Posted on

How to Use Shadcn UI in Your React + Vite Project

#frontend #tutorial #productivity #beginners

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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: [], };
Enter fullscreen mode Exit fullscreen mode

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

@import "tailwindcss";
Enter fullscreen mode Exit fullscreen mode

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'), }, }, });
Enter fullscreen mode Exit fullscreen mode

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

npm install -D @types/node
Enter fullscreen mode Exit fullscreen mode

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

{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } }
Enter fullscreen mode Exit fullscreen mode

Step 4: Initialize Shadcn UI

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

npx shadcn@latest init
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Simple Shadcn UI Landing Page

Folder structure of Project

Image description

Shadcn UI Landing Page

Image description

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!

Top comments (0)