DEV Community

Ignatium
Ignatium

Posted on AI-assisted

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

#beginners

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

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

Start the dev server:

pnpm dev
Enter fullscreen mode Exit fullscreen mode

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

2. Install Tailwind CSS v4 using the Vite plugin 

pnpm add tailwindcss @tailwindcss/vite
Enter fullscreen mode Exit fullscreen mode

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()],
})
Enter fullscreen mode Exit fullscreen mode

Open tsconfig.json and add the compiler options:

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

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

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

4. Add Tailwind to your CSS

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

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

To confirm the install worked, drop this into App.tsx:

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

5. Install shadcn/ui 

pnpm dlx shadcn@latest init
Enter fullscreen mode Exit fullscreen mode

6. Add a component 

pnpm dlx shadcn@latest add button
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (0)