---
title: Get Started
description: "How to install and use Yamada UI in your project."
---

## Pick your framework

- [Next.js (App)](https://yamada-ui.com/docs/get-started/frameworks/next-app.md): A guide for installing and using Yamada UI with Next.js app directory.
- [Next.js (Pages)](https://yamada-ui.com/docs/get-started/frameworks/next-pages.md): A guide for installing and using Yamada UI with Next.js pages directory.
- [Vite](https://yamada-ui.com/docs/get-started/frameworks/vite.md): A guide for installing and using Yamada UI with Vite.js projects.
- [React Router](https://yamada-ui.com/docs/get-started/frameworks/react-router.md): A guide for installing and using Yamada UI with React Router projects.

## Installation

To install Yamada UI in your project, you can either set it up using the [CLI](https://yamada-ui.com/docs/get-started/cli.md) or install it via [npm](https://www.npmjs.com).

:::warning
Yamada UI is compatible with React 19. If you are using React 18 or earlier, please upgrade to React 19.
:::

### CLI

#### Setup

Running the command will create the necessary files and folders in your project.

```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
```

#### Install the package

Install `@workspaces/ui` to your application.

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

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

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

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

#### Add provider

After installing, add `UIProvider` to the root of your application.

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

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

#### Use components

After adding `UIProvider`, you can use the components in your application.

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

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

That's it! You've successfully set up Yamada UI.

### npm

#### Install the package

Yamada UI can be installed with `@yamada-ui/react` only, and all components and hooks can be used.

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

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

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

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

#### Add provider

After installing, add `UIProvider` to the root of your application.

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

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

#### Use components

After adding `UIProvider`, you can use the components in your application.

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

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

That's it! You've successfully set up Yamada UI.