How to install shadcn/ui with Vite, React, TypeScript, and Tailwind CSS v4 using pnpm.

A quick walkthrough for manually spinning up a new Vite + React + TypeScript project with Tailwind CSS v4 and shadcn/ui. Hopefully this setup guide will help newer users understand the configuration alias structure and paths required for shadcn/ui to properly function, and give a step forward towards customizing new projects to fit their particular needs. For an automated setup, please refere to the official shadcn/ui documentation.

Tech stack: Vite, React, TypeScript, Tailwind CSS v4, shadcn/ui, pnpm

1. Create a Vite + React + TypeScript project

pnpm create vite@latest my-app

When prompted, select:

• Framework: React
• Variant: TypeScript
• Linter: choose whichever you prefer (e.g. ESLint)
• Confirm to install dependencies

Then move into the project and install:

cd my-app
pnpm install

Start the dev server:

pnpm dev

Your project should now be running at [http://localhost:5173].

2. Install Tailwind CSS v4 using the Vite plugin

pnpm add tailwindcss @tailwindcss/vite

3. Configure folder aliases

Open vite.config.ts and import the @tailwindcss/vite plugin plus add an alias for the ./src folder found in the project's root folder:

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import tailwindcss from "@tailwindcss/vite";
import { fileURLToPath, URL } from "node:url";

// https://vite.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  plugins: [react(), tailwindcss()],
})

Open tsconfig.json and add the compiler options:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Open tsconfig.app.json and add the same path alias:

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

4. Add Tailwind to your CSS

Open src/index.css, delete everything in it, and add the Tailwind import:

@import "tailwindcss";

To confirm the install worked, drop this into App.tsxto test your Tailwind install:

<h1 className="text-7xl font-bold text-amber-300">Tailwind Ready</h1>

5. Install shadcn/ui

pnpm dlx shadcn@latest init

After installing shadcn/ui you will notice the src/index.css file is auto-populated with Tailwind CSS code.

6. Add a component

pnpm dlx shadcn@latest add button

When prompted, choose the Base style and any color preset you like. This automatically creates a src/components/ui and a src/components/lib folder.

7. Wire it up in App.tsx

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

function App() {
  return (
    <>
      <h1 className="text-7xl font-bold text-amber-300">Tailwind Ready</h1>
      <Button className="bg-blue-500 text-white font-bold">Hello Button</Button>
    </>
  )
}

export default App

That's it, you now have a Vite + React + TypeScript project running Tailwind CSS v4 and shadcn/ui, ready for building out real components, and starting your journey.