120k
New

Astro

PreviousNext

为 Astro 安装和配置 shadcn/ui。

选择符合你起点的设置。

使用 shadcn/create

构建你的预设并生成 Astro 项目命令。

使用 CLI

直接从终端搭建新的 Astro 项目。

现有项目

在现有的 Astro 项目中手动配置 shadcn/ui。

使用 shadcn/create

构建你的预设

打开 shadcn/create 并以可视化方式构建你的预设。选择你的风格、颜色、字体、图标等。

打开 shadcn/create

创建项目

点击 Create Project，选择你的包管理器，并复制生成的命令。

生成的命令将类似于这样：

pnpm dlx shadcn@latest init --preset [CODE] --template astro

确切命令将包含你选择的选项，例如 --base、--monorepo 或 --rtl。

添加组件

将 Card 组件添加到你的项目：

pnpm dlx shadcn@latest add card

如果你创建了 monorepo，请从 apps/web 运行命令或从仓库根目录指定工作区：

pnpm dlx shadcn@latest add card -c apps/web

上述命令会将 Card 组件添加到你的项目。然后你可以这样导入它：

src/pages/index.astro
---
import Layout from "@/layouts/main.astro"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
---
 
<Layout>
  <Card className="max-w-sm">
    <CardHeader>
      <CardTitle>项目概览</CardTitle>
      <CardDescription>
        跟踪你的 Astro 应用的进度和最近活动。
      </CardDescription>
    </CardHeader>
    <CardContent>
      你的设计系统已就绪。开始构建你的下一个组件。
    </CardContent>
  </Card>
</Layout>

如果你创建了 monorepo，请更新 apps/web/src/pages/index.astro 并改为从 @workspace/ui/components/card 导入。apps/web/src/layouts/main.astro 处的 monorepo 布局已经为你导入了 @workspace/ui/globals.css。

使用 CLI

创建项目

运行 init 命令来搭建新的 Astro 项目。按照提示配置你的项目：base、preset、monorepo 等。

pnpm dlx shadcn@latest init -t astro

对于 monorepo 项目，使用 --monorepo 标志：

pnpm dlx shadcn@latest init -t astro --monorepo

添加组件

将 Card 组件添加到你的项目：

pnpm dlx shadcn@latest add card

如果你创建了 monorepo，请从 apps/web 运行命令或从仓库根目录指定工作区：

pnpm dlx shadcn@latest add card -c apps/web

上述命令会将 Card 组件添加到你的项目。然后你可以这样导入它：

src/pages/index.astro
---
import Layout from "@/layouts/main.astro"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
---
 
<Layout>
  <Card className="max-w-sm">
    <CardHeader>
      <CardTitle>项目概览</CardTitle>
      <CardDescription>
        跟踪你的 Astro 应用的进度和最近活动。
      </CardDescription>
    </CardHeader>
    <CardContent>
      你的设计系统已就绪。开始构建你的下一个组件。
    </CardContent>
  </Card>
</Layout>

如果你创建了 monorepo，请更新 apps/web/src/pages/index.astro 并改为从 @workspace/ui/components/card 导入。apps/web/src/layouts/main.astro 处的 monorepo 布局已经为你导入了 @workspace/ui/globals.css。

现有项目

创建项目

如果你需要新的 Astro 项目，请先创建一个。否则，跳过此步骤。

pnpm create astro@latest astro-app -- --template with-tailwindcss --install --add react --git

此命令为你设置 Tailwind CSS 和 React 集成。如果你要将 shadcn/ui 添加到较旧或自定义的 Astro 应用，请确保在继续之前两者都已配置。

Tailwind starter 通过 src/layouts/main.astro 加载你的全局样式表。保留该布局，或确保你的页面导入了 @/styles/global.css。

编辑 tsconfig.json 文件

如果你的项目已经配置了 @/* 别名，请跳过此步骤。

将以下代码添加到 tsconfig.json 文件以解析路径：

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

运行 CLI

运行 shadcn init 命令来设置你的项目：

pnpm dlx shadcn@latest init

添加组件

你现在可以开始向项目添加组件了。

pnpm dlx shadcn@latest add button

以上命令将把 Button 组件添加到你的项目中。然后你可以这样导入它：

src/pages/index.astro
---
import Layout from "@/layouts/main.astro"
import { Button } from "@/components/ui/button"
---
 
<Layout>
  <div class="grid h-screen place-items-center content-center">
    <Button>按钮</Button>
  </div>
</Layout>