Vite

インストール

Vite Reactプロジェクトで、次のいずれかのコマンドを実行してNextUIをインストールします。

npm i @nextui-org/react framer-motion

ホイストされた依存関係のセットアップ

注: このステップは、pnpm を使用してインストールする場合のみ必要です。他のパッケージマネージャーを使用して NextUI をインストールする場合は、このステップをスキップできます。

pnpm を使用している場合は、パッケージをルートの node_modules にホイストするために、次の行を .npmrc ファイルに追加する必要があります。

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: [
    // ...
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()]
}

プロバイダーのセットアップ

NextUI をインストールした後、アプリケーションの root で NextUIProvider をセットアップする必要があります。

src ディレクトリに移動し、main.jsx または main.tsx 内で、App を NextUIProvider で囲みます。

// main.tsx or main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import {NextUIProvider} from '@nextui-org/react'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <NextUIProvider>
      <App />
    </NextUIProvider>
  </React.StrictMode>,
)