Vite

Install shadcn/ui in a Vite React app with the official CLI. Tailwind v4, the @ alias, then add a component from the shadcn.io registry.

init -t vite scaffolds the app. For a repo you already have: Tailwind, both tsconfigs, vite.config.ts, then init. Then add from the shadcn.io registry.

Use the CLI

Scaffold Vite from the terminal

Existing project

Add shadcn to an app you have

Use the CLI

Create the project

npx shadcn@latest init -t vite

Monorepo:

npx shadcn@latest init -t vite --monorepo

Add a component

npx shadcn@latest add https://www.shadcn.io/r/card.json

Monorepo: from apps/web, or -c apps/web from the root.

Import it

src/App.tsx

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

function App() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your Vite app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

export default App

Monorepo: apps/web/src/App.tsx, import @workspace/ui/components/card.

Existing project

Create the app if you need one

React + TypeScript template. Skip if the repo exists.

npm create vite@latest

Tailwind CSS

Skip if it is already there.

npm install tailwindcss @tailwindcss/vite

Replace src/index.css:

src/index.css

@import "tailwindcss";

tsconfig.json

Vite splits TypeScript config. Put baseUrl and paths on both tsconfig.json and tsconfig.app.json.

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json

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

vite.config.ts

npm install -D @types/node

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

Run init

npx shadcn@latest init

Add a component

npx shadcn@latest add https://www.shadcn.io/r/button.json

src/App.tsx

import { Button } from "@/components/ui/button"

function App() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}

export default App