# Vite · JGuang UI
> 本页提供 JGuang UI 技术内容、中文导航与术语适配。
- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/installation/vite
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。
Choose the setup that matches your starting point.
[Use JGuang UI installation Build your preset and generate a Vite project command.](#scaffold-with-create)
[Use the CLI Scaffold a new Vite project directly from the terminal.](#scaffold-with-cli)
[Existing Project Configure JGuang UI manually in an existing Vite project.](#existing-vite-project)
## Use JGuang UI installation
### Build Your Preset
Open [JGuang UI installation](/systems/jguang-ui#install) and build your preset visually. Choose your style, colors, fonts, icons, and more.
[Open JGuang UI installation](/systems/jguang-ui#install)
### Create Project
Click `Create Project`, choose your package manager, and copy the generated command.
The generated command will look similar to this:
```text
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:
```text
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:
```text
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:
```tsx showLineNumbers title="src/App.tsx"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
function App() {
return (
Project Overview
Track progress and recent activity for your Vite app.
Your design system is ready. Start building your next component.
)
}
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.
```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```
**For a monorepo project, use `--monorepo` flag:**
```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```
### Add Components
Add the `Card` component to your project:
```text
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:
```text
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:
```tsx showLineNumbers title="src/App.tsx"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
function App() {
return (
Project Overview
Track progress and recent activity for your Vite app.
Your design system is ready. Start building your next component.
)
}
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.
```bash
npm create vite@latest
```
### Add Tailwind CSS
If your project already has Tailwind CSS configured, skip this step.
```bash
npm install tailwindcss @tailwindcss/vite
```
Replace everything in `src/index.css` with the following:
```css title="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`:
```ts title="tsconfig.json" {11-16} showLineNumbers
{
"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:
```ts title="tsconfig.app.json" {4-9} showLineNumbers
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
```
### Update vite.config.ts
Install `@types/node` and update `vite.config.ts` so Vite can resolve the `@` alias:
```bash
npm install -D @types/node
```
```typescript title="vite.config.ts" showLineNumbers {1,2,8-13}
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:
```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```
### Add Components
You can now start adding components to your project.
```text
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:
```tsx showLineNumbers title="src/App.tsx"
import { Button } from "@/components/ui/button"
function App() {
return (