Project Initialization

Begin by creating a new Vite project. This ensures a clean slate with the latest tooling. We’ll use pnpm as our package manager. Navigate to your desired project directory in your terminal and run the following command:

pnpm create vite my-shadcn-app --template react-ts

Once the project is created, change into the project directory and install the initial dependencies:

cd my-shadcn-app
pnpm install

Tailwind CSS v4 Setup

Next, we’ll integrate Tailwind CSS v4. Install Tailwind CSS and its peer dependencies:

pnpm add -D tailwindcss postcss autoprefixer
pnpm dlx tailwindcss init -p

This command creates two configuration files: tailwind.config.js and postcss.config.js. Open tailwind.config.js and configure the content array to scan your project files for Tailwind classes. This is crucial for Tailwind to correctly purge unused styles.

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

Now, create a src/index.css file (or similar, depending on your project structure) and add the Tailwind directives:


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

Finally, import this CSS file into your main application entry point, typically src/main.tsx:


import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  
    
  ,
)

shadcn/ui Installation

With Tailwind CSS set up, we can now install shadcn/ui. Run the init command:

pnpm dlx shadcn-ui@latest init

This command will prompt you with a series of questions to configure shadcn/ui for your project. It’s important to answer these accurately to ensure proper integration. Key questions include:

  • Would you like to use TypeScript (recommended)? Answer yes.
  • Which style would you like to use? Choose your preferred style (e.g., Default or New York).
  • Which color would you like to use as base color? Select a base color.
  • Where is your global CSS file? Enter src/index.css (or the path to your main CSS file where you added the Tailwind directives).
  • Would you like to import the global CSS variable? Answer yes.
  • Are you using React Server Components? Answer no for a standard Vite setup.
  • Which framework are you using? Select Vite.
  • Where do you want to install base components? The default src/components is usually fine.
  • Where do you want to install your utilities? The default lib/utils is recommended.
  • Are you using React Router? If yes, answer yes and specify the path (e.g., src/routes). If not, answer no.
  • Write configuration to components.json: Confirm to save these settings.

The init command will automatically update your tailwind.config.js, create a components.json file, and set up the necessary utility files. It also installs shadcn/ui as a dependency.

Adding Components

Now you can add shadcn/ui components. For example, to add the Button component, run:

pnpm dlx shadcn-ui@latest add button

This command fetches the Button component's code and places it in your configured base components directory (e.g., src/components/ui/button.tsx). The component is now ready to be imported and used in your React components. For instance, in src/App.tsx:


import './App.css'
import { Button } from './components/ui/button'

function App() {
  return (
    

      
shadcn/ui with Vite

      
    

  )
}

export default App

Ensure your App.tsx imports the Button component correctly and uses it within a structure that benefits from Tailwind's utility classes (like the p-8 class for padding). The Button component, as generated by shadcn/ui, will already have sensible default styling applied via Tailwind classes.

Configuration Aliases (Optional but Recommended)

For cleaner imports, especially as your project grows, setting up path aliases is highly recommended. shadcn/ui’s setup often includes this, but it’s good to verify. Your vite.config.ts should have an alias for components and utilities. If not, add it:


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'),
      '@components': path.resolve(__dirname, './src/components'),
      '@lib': path.resolve(__dirname, './lib'),
    },
  },
})

If you modify vite.config.ts, you’ll need to restart your Vite development server. With these aliases, you can import components like @components/ui/button instead of ../../components/ui/button, significantly improving readability.

Running the Application

To see your setup in action, start the development server:

pnpm dev

Your Vite development server will start, and you can access your application in the browser. You should see the styled button rendered correctly, confirming that shadcn/ui, Tailwind CSS, React, and TypeScript are all working in harmony.