Vite

Install and configure DGA Registry components for Vite.

Choose the setup that matches your starting point.

Scaffold with the CLI

Create Project

Run the init command to scaffold a new Vite project. Follow the prompts to configure your project.

pnpm dlx shadcn@latest init --preset b0 --template vite

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

pnpm dlx shadcn@latest init --preset b0 --template vite --monorepo

Existing Project

Create Project

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

npm create vite@latest

Add Tailwind CSS

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

npm install tailwindcss @tailwindcss/vite

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

@import "tailwindcss";

Edit tsconfig.json

If your project already has the @/* alias configured, skip this step. Add the baseUrl and paths properties to the compilerOptions section of your tsconfig.json:

1{
2"compilerOptions": {
3  "baseUrl": ".",
4  "paths": {
5    "@/*": ["./src/*"]
6  }
7}
8}

Update vite.config.ts

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

npm install -D @types/node

1import path from "path"
2import tailwindcss from "@tailwindcss/vite"
3import react from "@vitejs/plugin-react"
4import { defineConfig } from "vite"
5
6export default defineConfig({
7plugins: [react(), tailwindcss()],
8resolve: {
9  alias: {
10    "@": path.resolve(__dirname, "./src"),
11  },
12},
13})

Run the CLI

Run the shadcn init command to set up shadcn/ui in your existing project:

pnpm dlx shadcn@latest init

Configure DGA Registry

Add the DGA Registry

Add the DGA registry to your components.json to enable @dga/ imports:

{
  "registries": {
    "@dga": "https://dga-registry.vercel.app/r/{name}.json"
  }
}

Add the Design Tokens

Add this import to the top of your src/index.css:

@import "../styles/tokens.css";

This loads all DGA color tokens, spacing, and typography variables.

Arabic (RTL) Support

Need RTL support? Re-run init with the --rtl flag:

pnpm dlx shadcn@latest init --preset b0 --template vite --rtl

Add Components

You can now start adding components to your project:

pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/button.json

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

npx shadcn@latest add button -c apps/web

Example Usage

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

1import { Button } from "@/components/ui/button"
2
3export default function Home() {
4return (
5  <div>
6    <Button>Click me</Button>
7  </div>
8)
9}

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