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

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

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]

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.

DEV Community: Ignatium