インストール

パッケージのインストール

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とモノレポアーキテクチャを使用している場合は、必ずルートの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

コンポーネントのインストール

次に、使用したいコンポーネントをインストールしましょう。たとえば、Buttonコンポーネントを使用したい場合は、ターミナルで次のいずれかのコマンドを実行する必要があります。

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ファイルには、使用しているコンポーネントのスタイルのみを追加する必要があります。たとえば、Buttonコンポーネントの場合、次のコードを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>
  );
}