New

Vite

PreviousNext

Install and configure StyleDriven UI for Vite.

Choose the setup that matches your starting point.

Use shadcn/create

Build your preset and generate a Vite project command.

Use the CLI

Scaffold a new Vite project directly from the terminal.

Existing Project

Configure StyleDriven UI manually in an existing Vite project.

Use shadcn/create

Build Your Preset

Open shadcn/create and build your preset visually. Choose your style, colors, fonts, icons, and more.

Open shadcn/create

Create Project

Click Create Project, choose your package manager, and copy the generated command.

The generated command will look similar to this:

pnpm dlx shadcn@latest init --preset [CODE] --template vite

The exact command will include your selected options such as --base, --monorepo, or --rtl.

Add Components

Add the Card component to your project:

pnpm dlx shadcn@latest add card

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

pnpm dlx shadcn@latest add card -c apps/web

The command above will add the Card component to your project. You can then import it like this:

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

If you created a monorepo, update apps/web/src/App.tsx and import from @workspace/ui/components/card instead.

Use the CLI

Create Project

Run the init command to scaffold a new Vite project. Follow the prompts to configure your project: base, preset, monorepo, and more.

pnpm dlx shadcn@latest init -t vite

For a monorepo project, use --monorepo flag:

pnpm dlx shadcn@latest init -t vite --monorepo

Add Components

Add the Card component to your project:

pnpm dlx shadcn@latest add card

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

pnpm dlx shadcn@latest add card -c apps/web

The command above will add the Card component to your project. You can then import it like this:

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

If you created a monorepo, update apps/web/src/App.tsx and import from @workspace/ui/components/card 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.

pnpm create vite@latest

Add Tailwind CSS

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

pnpm add tailwindcss @tailwindcss/vite

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

src/index.css
@import "tailwindcss";

Edit tsconfig.json file

If your project already has the @/* alias configured, skip this step.

Vite splits TypeScript configuration across multiple files. Add the baseUrl and paths properties to the compilerOptions section of 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 file

Add the same alias to tsconfig.app.json so your editor can resolve imports:

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

Update vite.config.ts

Install @types/node and update vite.config.ts so Vite can resolve the @ alias:

pnpm 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"
 
// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Run the CLI

Run the sd-ui init command to set up StyleDriven UI in your project:

pnpm dlx shadcn@latest init

Add Components

You can now start adding components to your project.

pnpm dlx shadcn@latest add button

The command above will add the Button component to your project. You can then import it 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