安装

安装

在你的终端中执行以下命令之一

初始化并启动应用程序

使用 init 命令初始化项目。

你将被提示配置你的项目

安装依赖项以启动本地服务器

启动本地服务器

添加组件

一旦你的 NextUI 项目准备好进行开发，你可以使用 CLI 添加单独的组件。例如，要添加一个按钮组件

此命令将 Button 组件添加到你的项目中，并管理所有相关的依赖项。

你也可以一次添加多个组件

或者你可以通过运行以下命令添加主库 @nextui-org/react

如果你省略组件名称，CLI 将提示你选择要添加的组件。

安装包

要安装 NextUI，请在你的终端中运行以下命令之一

提升依赖项设置

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

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

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

Tailwind CSS 设置

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

注意：如果你正在使用 pnpm 和 monorepo 架构，请确保你指向的是 ROOT 的 node_modules

Provider 设置

必须在应用程序的root根部添加 NextUIProvider。

安装核心软件包

虽然您可以单独安装每个软件包，但您需要先安装核心软件包，以确保所有组件都能正常工作。

在终端中运行以下命令之一来安装核心软件包

安装组件

现在，让我们安装您想要使用的组件。例如，如果您想使用 Button 组件，您需要在终端中运行以下命令之一

提升依赖项设置

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

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

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

Tailwind CSS 设置

当您使用单独的软件包时，TailwindCSS 的设置会略有变化。您只需要将您正在使用的组件的样式添加到您的 tailwind.config.js 文件中。例如，对于 Button 组件，您需要将以下代码添加到您的 tailwind.config.js 文件中

Provider 设置

必须在应用程序的root根部添加 NextUIProvider。

使用组件

现在，您可以在您的应用程序中使用您安装的组件了