---
title: はじめる
description: "プロジェクトにYamada UIをインストールして使用する方法。"
---

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

- [Next.js (App)](https://yamada-ui.com/docs/get-started/frameworks/next-app.md): Next.jsの`app`ディレクトリにYamada UIをインストールして使用するためのガイド。
- [Next.js (Pages)](https://yamada-ui.com/docs/get-started/frameworks/next-pages.md): Next.jsの`pages`ディレクトリにYamada UIをインストールして使用するためのガイド。
- [Vite](https://yamada-ui.com/docs/get-started/frameworks/vite.md): Vite.jsのプロジェクトにYamada UIをインストールして使用するためのガイド。
- [React Router](https://yamada-ui.com/docs/get-started/frameworks/react-router.md): React RouterのプロジェクトにYamada UIをインストールして使用するためのガイド。

## インストール

プロジェクトにYamada UIをインストールするには、[CLI](https://yamada-ui.com/docs/get-started/cli.md)でセットアップするか、[npm](https://www.npmjs.com)からインストールします。

:::warning
Yamada UIは、React 19のみ互換性があります。React 18以前を使用している場合は、React 19までアップグレードしてください。
:::

### CLI

#### セットアップする

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

```bash
pnpm dlx @yamada-ui/cli init
```

```bash
npx @yamada-ui/cli init
```

```bash
yarn dlx @yamada-ui/cli init
```

```bash
bunx @yamada-ui/cli init
```

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

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

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

```bash
npm install "@workspaces/ui@workspace:*"
```

```bash
yarn add "@workspaces/ui@workspace:*"
```

```bash
bun add "@workspaces/ui@workspace:*"
```

#### プロバイダーを追加する

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

```tsx
import { UIProvider } from "@workspaces/ui"

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

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

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

```tsx
import { Button } from "@workspaces/ui"

const App = () => {
  return <Button>Click me</Button>
}
```

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

### npm

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

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

```bash
pnpm add @yamada-ui/react
```

```bash
npm install @yamada-ui/react
```

```bash
yarn add @yamada-ui/react
```

```bash
bun add @yamada-ui/react
```

#### プロバイダーを追加する

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

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

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

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

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

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

const App = () => {
  return <Button>Click me</Button>
}
```

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