安裝

安裝

在您的終端機中執行下列其中一個指令

初始化和啟動應用程式

使用 init 指令初始化專案。

系統將提示您設定專案

安裝相依性以啟動本機伺服器

啟動本機伺服器

新增元件

一旦您的 NextUI 專案準備好進行開發，您可以使用 CLI 新增個別元件。例如，若要新增按鈕元件

此指令會將 Button 元件新增至您的專案，並管理所有相關的相依性。

您也可以一次新增多個元件

或者您可以執行下列指令來新增主要函式庫 @nextui-org/react

如果您省略元件名稱，CLI 會提示您選取要新增的元件。

安裝封裝

若要安裝 NextUI，請在您的終端機中執行下列其中一個指令

提升的相依性設定

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

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

在修改 .npmrc 檔案之後，您需要再次執行 pnpm install，以確保正確安裝相依性。

Tailwind CSS 設定

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

注意：如果您使用 pnpm 和單一儲存庫架構，請務必指向根目錄 node_modules

Provider 設定

在應用程式的 root 新增 NextUIProvider 非常重要。

安裝核心套件

雖然您可以分別安裝每個套件，但您需要先安裝核心套件，以確保所有元件都能正常運作。

在您的終端機中執行以下其中一個命令來安裝核心套件

安裝元件

現在，讓我們安裝您想使用的元件。例如，如果您想使用 Button 元件，您需要在終端機中執行以下其中一個命令

提升的相依性設定

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

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

在修改 .npmrc 檔案之後，您需要再次執行 pnpm install，以確保正確安裝相依性。

Tailwind CSS 設定

當您使用個別套件時，TailwindCSS 的設定會有些許變更。您只需要將您正在使用的元件樣式添加到您的 tailwind.config.js 檔案中。例如，對於 Button 元件，您需要將以下程式碼添加到您的 tailwind.config.js 檔案中

Provider 設定

在應用程式的 root 新增 NextUIProvider 非常重要。

使用元件

現在，您可以在您的應用程式中使用您安裝的元件