Astro

Reactのインストール

NextUIはReact上に構築されているため、最初にReactをインストールする必要があります。統合ガイドに従ってReactをインストールできます。

NextUIのインストール

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

npm i @nextui-org/react framer-motion

Hoisted Dependencies 設定

注意: この手順は 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.cjs ファイルに追加する必要があります

注意: pnpm とモノレポを使用している場合は、ルート node_modules に確実にポインタを当てていることを確認してください。。

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

使用方法

これで NextUI コンポーネントをインポートして、Astro プロジェクトで使用できるようになります

---
import Layout from '../layouts/Layout.astro';
import {Button} from '@nextui-org/react';
---

<Layout title="Welcome to Astro.">
  <main>
      <Button color="primary" client:visible>My button</Button>
  </main>
</Layout>

クライアント側でのみコンポーネントを表示できるようにするには、client:visible をコンポーネントに追加する必要があることに注意してください。そうでないと、NextUI コンポーネントの一部の機能が適切に機能しない場合があります。