はじめる

フレームワークを選択する

インストール

プロジェクトにYamada UIをインストールするには、CLIでセットアップするか、npmからインストールします。

CLI

• 1

  セットアップする

  コマンドを実行すると、プロジェクトに必要なファイルやフォルダが作成されます。

  pnpmnpmyarnbun

  pnpm dlx @yamada-ui/cli init
  

• 2

  パッケージをインストールする

  アプリケーションに@workspaces/uiをインストールします。

  pnpmnpmyarnbun

  pnpm add "@workspaces/ui@workspace:*"
  

• 3

  プロバイダーを追加する

  インストール後、アプリケーションのルートにUIProviderを追加します。

  import { UIProvider } from "@workspaces/ui"
  
  const App = () => {
    return (
      <UIProvider>
        <YourApplication />
      </UIProvider>
    )
  }
  

• 4

  コンポーネントを使用する

  UIProviderを追加したら、アプリケーション内でコンポーネントを使用します。

  import { Button } from "@workspaces/ui"
  
  const App = () => {
    return <Button>Click me</Button>
  }
  

  これで、Yamada UIのセットアップは完了です！

npm

• 1

  パッケージをインストールする

  Yamada UIは、@yamada-ui/reactをインストールするだけで、すべてのコンポーネントやフックを使用できます。

  pnpmnpmyarnbun

  pnpm add @yamada-ui/react
  

• 2

  プロバイダーを追加する

  インストール後、アプリケーションのルートにUIProviderを追加します。

  import { UIProvider } from "@yamada-ui/react"
  
  const App = () => {
    return (
      <UIProvider>
        <YourApplication />
      </UIProvider>
    )
  }
  

• 3

  コンポーネントを使用する

  UIProviderを追加したら、アプリケーション内でコンポーネントを使用します。

  import { Button } from "@yamada-ui/react"
  
  const App = () => {
    return <Button>Click me</Button>
  }
  

  これで、Yamada UIのセットアップは完了です！