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

Ignatium — Wed, 23 Sep 2026 01:13:34 +0000

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 using other tools with shadcn/ui like TanStack router and TanStack table. 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 add the Tailwind plugin plus an alias for the ./src 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:

"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.tsx:

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

5. Install shadcn/ui

pnpm dlx shadcn@latest init

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.

DEV Community: Ignatium