Install shadcn/ui with Vite React projects for fast development. Complete setup guide with Tailwind CSS v4 and TypeScript configuration.

Need help installing shadcn on Vite?

Join our Discord community for help from other developers.

How to install shadcn/ui with Vite

Vite gives you blazing fast HMR and builds without the framework overhead. Perfect when you want a lean setup for dashboards, admin panels, or SPAs.

Complete setup

Create your Vite project

pnpm create vite@latest my-app --template react-ts
cd my-app
pnpm install

Always go with the TypeScript template. The type safety for component props alone is worth it.

Install Tailwind CSS v4

pnpm add tailwindcss @tailwindcss/vite

Replace everything in src/index.css:

@import "tailwindcss";

That's it for Tailwind v4. So much cleaner than the old three-line import dance.

Configure TypeScript paths

You need to update TWO files (Vite splits the TS config):

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

This enables clean imports like @/components/ui/button instead of ../../../components/ui/button.

Update Vite config

pnpm add -D @types/node

Then update vite.config.ts:

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"),
    },
  },
});

Initialize shadcn/ui

npx shadcn@latest init

Pick your preferred style when prompted. The CLI will create components.json and set up your theme.

Add components

npx shadcn@latest add button card input

Use them in src/App.tsx:

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

function App() {
  return (
    <div className="container mx-auto p-8">
      <Card className="p-6">
        <h1 className="text-2xl font-bold mb-4">Vite + shadcn/ui</h1>
        <Button>Get started</Button>
      </Card>
    </div>
  );
}

export default App;

Project structure

Vite keeps things simple:

App.tsx

main.tsx

index.css

vite.config.ts

components.json

Deployment options

Static hosting is dead simple with Vite:

Platform	Setup	Best For
Vercel/Netlify	Just connect your repo	Zero config deployment
GitHub Pages	Use the `base` option in vite.config	Free hosting for open source
Cloudflare Pages	Crazy fast edge deployment	Global performance
AWS S3 + CloudFront	For when you need that enterprise setup	Scale and custom domains

Common gotchas

"Cannot resolve @/components"

Double-check BOTH tsconfig.json and tsconfig.app.json have the paths config. Vite needs it in both.

Styles not applying

Make sure src/index.css is imported in src/main.tsx:

import "./index.css";

Build errors with paths

Your build might fail if you're using Node.js modules. Add them to vite.config.ts:

export default defineConfig({
  build: {
    rollupOptions: {
      external: ["fs", "path", "os"],
    },
  },
});

Next steps

With Vite + shadcn/ui set up:

Browse official components for forms, tables, and UI elements
Add charts for data visualization
Explore community components for extended functionality
Add useful hooks to enhance your components
Use pre-built blocks to quickly build common layouts

Install shadcn/ui Vite