--- title: Astro description: 在 Astro 中安装并配置 shadcn/ui。 --- ### 创建项目 先创建一个新的 Astro 项目： ```bash npx create-astro@latest astro-app --template with-tailwindcss --install --add react --git ``` ### 编辑 tsconfig.json 在 `tsconfig.json` 中加入以下配置以解析路径别名： ```ts title="tsconfig.json" {4-9} showLineNumbers { "compilerOptions": { // ... "baseUrl": ".", "paths": { "@/*": [ "./src/*" ] } // ... } } ``` ### 运行 CLI 执行 `shadcn` 的 `init` 命令完成项目初始化： ```bash npx shadcn@latest init ``` ### 添加组件 现在可以向项目中添加组件。 ```bash npx shadcn@latest add button ``` 上述命令会加入 `Button` 组件，你可以按如下方式导入： ```astro title="src/pages/index.astro" {2,16} showLineNumbers --- import { Button } from "@/components/ui/button" --- Astro + TailwindCSS
```