Astro

安装 React

NextUI 构建在 React 之上，因此你需要先安装 React。你可以按照官方集成指南来安装 React。

安装 NextUI

在你的 Astro 项目中，运行以下命令之一来安装 NextUI

npm i @nextui-org/react framer-motion

提升依赖项设置

注意：此步骤仅适用于使用 pnpm 安装的用户。如果你使用其他包管理器安装 NextUI，则可以跳过此步骤。

如果你使用 pnpm，你需要在 .npmrc 文件中添加以下行，将我们的包提升到根 node_modules。

public-hoist-pattern[]=*@nextui-org/*

修改 .npmrc 文件后，你需要再次运行 pnpm install 以确保正确安装依赖项。

Tailwind CSS 设置

NextUI 构建在 Tailwind CSS 之上，因此你需要先安装 Tailwind CSS。你可以按照官方安装指南来安装 Tailwind CSS。然后你需要将以下代码添加到你的 tailwind.config.cjs 文件中

注意：如果你正在使用 pnpm 和单一仓库架构，请确保你指向 ROOT node_modules

// tailwind.config.cjs
const { nextui } = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()]
}

用法

现在你可以导入 NextUI 组件并在你的 Astro 项目中使用它们

---
import Layout from '../layouts/Layout.astro';
import {Button} from '@nextui-org/react';
---

<Layout title="Welcome to Astro.">
  <main>
      <Button color="primary" client:visible>My button</Button>
  </main>
</Layout>

请注意，你必须将 client:visible 添加到组件中，以使其仅在客户端可见。否则，NextUI 组件的某些功能可能无法正常工作。