DEV Community

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

Posted on Edited on AI-assisted

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

#shadcn #tailwindcss #react #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 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
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 -D tailwindcss @tailwindcss/vite
Enter fullscreen mode Exit fullscreen mode

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()],
})
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:

"compilerOptions": {
   ...
    "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.tsxto test your Tailwind install:

<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

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
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

8. Listing and changing the Shadcn theme presets.

To list your current theme presets navigate to your app's root folder and execute the following:

pnpm dlx shadcn@latest preset resolve
Enter fullscreen mode Exit fullscreen mode

To change the current preset, in your browser navigate to https://ui.shadcn.com/create and select your presets combination. At the bottom of the presets selection sidebar you will see something similar to "--preset bcivVKXQ", click on the preset and it will be copied to the clipboard. Install the new presets by executing the following command and typing "yes" to overwrite the currently used presets:

pnpm dlx shadcn@latest apply --preset [PRESET_CODE]
Enter fullscreen mode Exit fullscreen mode

To test the new presets just add another button to your app with Tailwindcss h-/w- attributes, the button should be rendered using your selected presets.

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.

Top comments (2)

Collapse
 
alexandersstudi profile image
Alexander •

Setting up those path aliases in Vite is usually the exact hurdle that catches developers out when moving away from Next.js defaults. Now that Tailwind v4 has shifted to a CSS-first configuration, managing the custom CSS variables shadcn relies on feels significantly cleaner without a bloated config file. Walking through it manually like this forces a proper understanding of the architecture rather than just blindly trusting the CLI.

Collapse
 
ignatium profile image
Ignatium •

Thanks for your comment Alexander, it's appreciated. I'm new to both shadcn/Tailwind and know the amount of effort that was required to get step-by-step instructions that actually work for Tailwind v4 without causing some sort of issue. I just hope the post helps others understand the setup and shorten the learning curve.

Cheers...