How to install shadcn/ui with Vite React projects. Fast setup guide with Tailwind CSS v4 configuration.

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