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

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

ターミナルで次のコマンドのいずれかを実行します。

pnpm add @yamada-ui/react

テーブル・カレンダー・カルーセルなど使用する場合は、別途インストールをする必要があります。

pnpm add @yamada-ui/table

UIProviderを追加する

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

import { UIProvider } from "@yamada-ui/react"

const App = () => {
  return (
    <UIProvider>
      <YourApplication />
    </UIProvider>
  )
}

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

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

import { Button } from "@yamada-ui/react"

const Demo = () => {
  return <Button>Click me!</Button>
}

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

学習を開始する

Yamada UIを知るために、基本やテーマを学んでみませんか？😎