安装

安装包

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

npm install @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.js 文件中

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

// tailwind.config.js
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()],
};

提供商设置

在应用程序的根目录中添加NextUIProvider至关重要。

import * as React from "react";

// 1. import `NextUIProvider` component
import {NextUIProvider} from "@nextui-org/react";

function App() {
  // 2. Wrap NextUIProvider at the root of your app
  return (
    <NextUIProvider>
      <YourApplication />
    </NextUIProvider>
  );
}

安装核心包

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

在你的终端中运行以下命令之一以安装核心包

npm install @nextui-org/theme @nextui-org/system framer-motion

安装组件

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

npm install @nextui-org/button

提升依赖项设置

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

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

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

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

Tailwind CSS 设置

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

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // single component styles
    "./node_modules/@nextui-org/theme/dist/components/button.js",
    // or you can use a glob pattern (multiple component styles)
    './node_modules/@nextui-org/theme/dist/components/(button|snippet|code|input).js'
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

提供商设置

在应用程序的根目录中添加NextUIProvider至关重要。

import * as React from "react";

// 1. import `NextUIProvider` component
import {NextUIProvider} from "@nextui-org/system";

function App() {
  // 2. Wrap NextUIProvider at the root of your app
  return (
    <NextUIProvider>
      <YourApplication />
    </NextUIProvider>
  );
}

使用组件

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

import * as React from "react";
import {Button} from "@nextui-org/button";

function App() {
  return (
    <Button>Press me</Button>
  );
}