Get Started

How to install and use Yamada UI in your project.

Pick your framework

Next.js (App)

A guide for installing and using Yamada UI with Next.js app directory.

Next.js (Pages)

A guide for installing and using Yamada UI with Next.js pages directory.

Vite

A guide for installing and using Yamada UI with Vite.js projects.

React Router

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 or install it via npm.

CLI

  • 1

    Setup

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

    pnpm dlx @yamada-ui/cli init
  • 2

    Install the package

    Install @workspaces/ui to your application.

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

    Add provider

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

    import { UIProvider } from "@workspaces/ui"

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

    Use components

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

    import { Button } from "@workspaces/ui"

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

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

npm

  • 1

    Install the package

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

    pnpm add @yamada-ui/react
  • 2

    Add provider

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

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

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

    Use components

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

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

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

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