The short version: create a Vite React + TypeScript app, add Tailwind CSS v4 with the @tailwindcss/vite plugin, set up the @/* import alias in both TypeScript and Vite, run pnpm dlx shadcn@latest init, then add components with pnpm dlx shadcn@latest add. This guide follows the official shadcn/ui Vite guide and covers both new and existing projects.
Pick your starting point
- New app: scaffold with Vite, or let the shadcn CLI scaffold a Vite project for you.
- Existing Vite app: only configure what is missing (Tailwind, alias), then initialize shadcn/ui.
New project
Option A: Vite first
Create the app and choose the React + TypeScript template when prompted:
As an Amazon Associate I earn from qualifying purchases.
pnpm create vite@latestThen continue with the existing-project steps below, which cover Tailwind, the alias and initialization.
Option B: let the shadcn CLI scaffold it
pnpm dlx shadcn@latest init -t viteThe CLI prompts for choices such as base, preset and monorepo options. The installation overview also describes shadcn/create, a tool for building a preset and generating a framework-specific command. The generated command depends on the options you pick in its UI, so use whatever it outputs.
#1 Best Overall
Existing Vite project
Confirm you have a Vite React + TypeScript app. Skip any step already correctly configured.
1. Add Tailwind CSS v4
pnpm add tailwindcss @tailwindcss/viteReplace the contents of src/index.css with:
@import "tailwindcss";2. Configure the @/* alias for TypeScript
Vite splits TypeScript configuration across several files. The official guide adds baseUrl and paths to both tsconfig.json and tsconfig.app.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}If @/* is already mapped, don’t add a second, conflicting entry.
Free tools Windows power users keep installed
One-click scans. No signup required.
3. Map the alias in Vite
Install Node type definitions so path and __dirname type-check:
pnpm add -D @types/nodeThen update vite.config.ts so the bundler resolves the alias and loads the Tailwind plugin next to the React plugin:
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})4. Initialize shadcn/ui
pnpm dlx shadcn@latest initThe CLI sets up its configuration and dependencies, adds the cn utility and configures CSS variables for theming. Answer the prompts; they vary with the CLI version.
5. Add components
Install only what you use:
pnpm dlx shadcn@latest add buttonThe component’s source is copied into your project, and you import it through the alias:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchimport { Button } from "@/components/ui/button"
export default function App() {
return <Button>Click me</Button>
}Start the dev server (typically pnpm dev) and confirm the button renders with styling. If it appears unstyled, check that src/index.css is imported in your entry file and that the Tailwind plugin is in vite.config.ts. If imports fail to resolve, recheck both TypeScript files and the Vite alias.
Best Value
Monorepos
Run the CLI from the app directory, or point it at the app with -c, for example -c apps/web. Depending on the generated structure, imports may use the workspace package path rather than @/.
Compatibility: Tailwind v4, React 19 and older projects
According to the shadcn/ui Tailwind v4 page, the CLI can initialize Tailwind v4 projects, and new projects start with Tailwind v4 and React 19. Existing Tailwind v3 and React 18 apps keep working, so you don’t need to upgrade just to add components. The page also warns that Tailwind v4 relies on modern browser features, so review its compatibility notes first if you support older browsers.
Manual installation
If you skip the CLI, the manual guide lists these dependencies:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
pnpm add shadcn class-variance-authority cn lucide-react tw-animate-cssIt also supplies a stylesheet that imports tailwindcss, tw-animate-css and shadcn/tailwind.css, plus theme configuration. It allows aliases via TypeScript paths or package.json#imports. For Vite, the @/* setup above is the direct match.
A note on versions
The commands use @latest, so they track the current CLI rather than a pinned version, and prompts may change over time. Check the official Vite guide if a prompt or step differs from what is shown here.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
