美しいコンポーネントでより速く開発
NextUI Pro

Remix

要件

RemixプロジェクトでNextUIを使用するには、次の手順に従う必要があります。

インストール

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

npm i @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.ts
const { nextui } = require("@nextui-org/react");


import type { Config } from 'tailwindcss'


export default {
  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()]
} satisfies Config

プロバイダーの設定

NextUI をインストールしたら、アプリケーションのrootにNextUIProviderを設定する必要があります。

src ディレクトリに移動し、root.tsx内で、App をNextUIProviderでラップしてください。

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import {NextUIProvider} from "@nextui-org/react";


export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <NextUIProvider>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
          <LiveReload />
        </NextUIProvider>
      </body>
    </html>
  );
}

バージョン 2 は React 18 以降でのみ互換性があります。React 17 以前を使用している場合は、NextUI のバージョン 1を使用してください。

ViteAstro