Docs
Astro

Astro

安装和配置 shadcn/ui 以用于 Astro

创建项目

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

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

编辑 tsconfig.json 文件

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

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

运行 CLI

运行 shadcn 初始化命令以设置您的项目：

pnpm dlx shadcn@latest init

添加组件

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

pnpm dlx shadcn@latest add button

上述命令将会将 Button 组件添加到您的项目中。您可以像这样导入它：

src/pages/index.astro
---
import { Button } from "@/components/ui/button"
---
 
<html lang="zh">
	<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>
		</div>
	</body>
</html>
RemixTanstack Start