Skip to main content

Shadcn UI - Complete Setup Guide

A comprehensive guide to setting up and configuring Shadcn UI with Tailwind CSS in your React project.

Steps for Shadcn UI Setup​

1. Install Tailwind CSS​

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

1.2. Edit index.css​

@tailwind base;
@tailwind components;
@tailwind utilities;

1.3. Edit tailwind.config.js​

content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
],

2. Create jsconfig.json​

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

3. Edit vite.config.js​

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

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

4. Run Shadcn UI Init​

npx shadcn@latest init