Get Started

Pick your framework

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.

  pnpmnpmyarnbun

  pnpm dlx @yamada-ui/cli init
  

• 2

  Install the package

  Install @workspaces/ui to your application.

  pnpmnpmyarnbun

  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.

  pnpmnpmyarnbun

  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.