Astro

为 Astro 安装和配置 shadcn/ui

开始一个新项目？ 使用 shadcn/create 来获取一个完整配置的 Astro 应用，包含自定义主题、Base UI 或 Radix，以及图标库。

创建项目

首先创建一个新的 Astro 项目：


pnpm dlx shadcn@latest init -t astro

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


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

添加组件

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


pnpm dlx shadcn@latest add button

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

src/pages/index.astro

---
import { Button } from "@/components/ui/button"
---
 
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro + TailwindCSS</title>
	</head>
 
	<body>
		<div class="grid place-items-center h-screen content-center">
			<Button>Button</Button>
		</div>
	</body>
</html>

Remix TanStack Start

创建项目添加组件