Skip to content
shadcn.io
shadcn.io is not affiliated with official shadcn/ui

Vite

Install shadcn.io in a Vite project.

Use the shadcn.io preset

Initialize a Vite project with the shadcn.io registry preset.

Use the CLI

Scaffold a new Vite project directly from the terminal.

Existing Project

Configure shadcn.io manually in an existing Vite project.

Use the shadcn.io Preset

Create Project

Run the init command with the shadcn.io preset and the Vite template:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t vite

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components like this:

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;

Use the CLI

Create Project

Run the init command to scaffold a new Vite project and configure shadcn.io:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t vite

For a monorepo project, use the --monorepo flag:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t vite --monorepo

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

If you created a monorepo, run the command from apps/web or specify the workspace from the repo root:

bunx --bun shadcn@latest add https://kit.dev/r/button.json -c apps/web

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components like this:

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;

If you created a monorepo, update apps/web/src/App.tsx and import from your workspace UI package instead.

Existing Project

Create Project

If you need a new Vite project, create one first and select the React + TypeScript template. Otherwise, skip this step.

bun create vite@latest

Add Tailwind CSS

If your project already has Tailwind CSS configured, skip this step.

bun add tailwindcss @tailwindcss/vite

Replace everything in src/index.css with the following:

src/index.css
@import "tailwindcss";

Edit tsconfig.json

Vite splits TypeScript config across multiple files. Add baseUrl and paths to the compilerOptions in both tsconfig.json and tsconfig.app.json:

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

Edit tsconfig.app.json

Add the same path resolution so your IDE resolves imports correctly:

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

Update vite.config.ts

Add the path alias so Vite resolves @/ at build time:

bun add -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 the CLI

Run the shadcn init command with the shadcn.io preset to set up your project.

bunx --bun shadcn@latest init https://kit.dev/r/style.json

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components like this:

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;