Astro

安裝 React

NextUI 建構於 React 之上，因此您需要先安裝 React。您可以按照官方的整合指南來安裝 React。

安裝 NextUI

在您的 Astro 專案中，執行以下其中一個指令來安裝 NextUI

提升依賴套件設定

注意：此步驟僅適用於使用 pnpm 安裝的使用者。如果您使用其他套件管理器安裝 NextUI，可以跳過此步驟。

如果您使用 pnpm，您需要在 .npmrc 檔案中新增以下這行，將我們的套件提升至根目錄的 node_modules。

修改 .npmrc 檔案後，您需要再次執行 pnpm install 以確保依賴套件已正確安裝。

Tailwind CSS 設定

NextUI 建構於 Tailwind CSS 之上，因此您需要先安裝 Tailwind CSS。您可以按照官方的安裝指南來安裝 Tailwind CSS。然後您需要將以下程式碼新增至您的 tailwind.config.cjs 檔案中

注意：如果您使用 pnpm 和 monorepo 架構，請確保您指向的是根目錄的 node_modules

使用方式

現在您可以匯入 NextUI 元件並在您的 Astro 專案中使用它們

請注意，您必須在元件中新增 client:visible，使其僅在客戶端可見。否則，NextUI 元件的某些功能可能無法正常運作。