Vite

Choose the setup that matches your starting point.

Use JGuang UI installation Build your preset and generate a Vite project command.

Use the CLI Scaffold a new Vite project directly from the terminal.

Existing Project Configure JGuang UI manually in an existing Vite project.

Use JGuang UI installation

Build Your Preset

Open JGuang UI installation and build your preset visually. Choose your style, colors, fonts, icons, and more.

Open JGuang UI installation

Create Project

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

The generated command will look similar to this:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

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

Add Components

Add the Card component to your project:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

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

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

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

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.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

For a monorepo project, use --monorepo flag:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Add Components

Add the Card component to your project:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

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

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

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

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.

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 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:

{
  "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:

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

Update vite.config.ts

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

npm install -D @types/node

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 JGuang UI Registry init command to set up JGuang UI in your project:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Add Components

You can now start adding components to your project.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

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

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