Astro

要求


要在你的 Astro 项目中使用 NextUI,你需要按照以下步骤操作

安装 React

NextUI 是基于 React 构建的,因此你需要先安装 React。你可以按照官方的集成指南来安装 React。

安装 NextUI

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

提升依赖项设置

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

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

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

Tailwind CSS 设置

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

注意: 如果你使用 pnpm 和 monorepo 架构,请确保你指向的是根目录 node_modules

用法

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

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

版本 2 仅与 React 18 或更高版本兼容。如果你正在使用 React 17 或更早版本,请使用NextUI 的版本 1