# Astro · JGuang UI
> 本页提供 JGuang UI 技术内容、中文导航与术语适配。
- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/installation/astro
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。
Choose the setup that matches your starting point.
[Use JGuang UI installation Build your preset and generate an Astro project command.](#scaffold-with-create)
[Use the CLI Scaffold a new Astro project directly from the terminal.](#scaffold-with-cli)
[Existing Project Configure JGuang UI manually in an existing Astro project.](#existing-astro-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:
```astro title="src/pages/index.astro" showLineNumbers
---
import Layout from "@/layouts/main.astro"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
---
Project Overview
Track progress and recent activity for your Astro app.
Your design system is ready. Start building your next component.
```
If you created a monorepo, update `apps/web/src/pages/index.astro` and import from `@workspace/ui/components/card` instead. The monorepo layout at `apps/web/src/layouts/main.astro` already imports `@workspace/ui/globals.css` for you.
## Use the CLI
### Create Project
Run the `init` command to scaffold a new Astro 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:
```astro title="src/pages/index.astro" showLineNumbers
---
import Layout from "@/layouts/main.astro"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
---
Project Overview
Track progress and recent activity for your Astro app.
Your design system is ready. Start building your next component.
```
If you created a monorepo, update `apps/web/src/pages/index.astro` and import from `@workspace/ui/components/card` instead. The monorepo layout at `apps/web/src/layouts/main.astro` already imports `@workspace/ui/globals.css` for you.
## Existing Project
### Create Project
If you need a new Astro project, create one first. Otherwise, skip this step.
```bash
npm create astro@latest astro-app -- --template with-tailwindcss --install --add react --git
```
This command sets up Tailwind CSS and the React integration for you. If you're adding JGuang UI to an older or custom Astro app, make sure both are configured before continuing.
The Tailwind starter loads your global stylesheet through `src/layouts/main.astro`. Keep that layout in place, or make sure your page imports `@/styles/global.css`.
### Edit tsconfig.json file
If your project already has the `@/*` alias configured, skip this step.
Add the following code to the `tsconfig.json` file to resolve paths:
```ts title="tsconfig.json" {4-9} showLineNumbers
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
```
### Run the CLI
Run the `JGuang UI Registry` init command to set up 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:
```astro title="src/pages/index.astro" showLineNumbers
---
import Layout from "@/layouts/main.astro"
import { Button } from "@/components/ui/button"
---