Leave Yamada UI a star

Yamada UIYamada UIv1.4.5


Install the package

You can use most components and hooks by installing @yamada-ui/react.

Execute one of the following commands in your terminal.

pnpm add @yamada-ui/react

If you want to use tables, calendars, carousels, etc., you need to install them separately.

pnpm add @yamada-ui/table

Provides convenient table components using @tanstack/react-table.


Provides convenient calendar and date picker components using dayjs.


Provides convenient carousel components using embla-carousel-react.


Provides convenient dropzone components using react-dropzone.


Provides convenient chart components using recharts.


Provides convenient markdown components using react-markdown and react-syntax-highlighter.


Provides components for conveniently using Font Awesome.

Add UIProvider

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

import { UIProvider } from "@yamada-ui/react"
const App = () => {
return (
<YourApplication />

Use components

Once you've added UIProvider, call the components within your application.

import { Button } from "@yamada-ui/react"
const Demo = () => {
return <Button>Click me!</Button>

With this, the setup for Yamada UI is complete!

Start learning

Why not learn the basics and themes to get to know Yamada UI? 😎

Learn the Basics

Read a 3-minute tutorial to learn the basics of Yamada UI's themes, styles, responsiveness, dark mode, and animations.

Learn about theming

Learn how to know the default theme of Yamada UI, and how to create and change colors, fonts, and other theme values.

Explore components

Yamada UI offers over 100 flexible components. All components support animations and dark mode.

Explore the source code

The packages and documentation site for Yamada UI are open source. If you like Yamada UI, please give it a star.

Edit this page on GitHub

PreviousGetting StartedNextLearn the Basics