Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.1

Individual Installation

Install Packages

Install the core and utilities of Yamada UI.

Run one of the following commands in your terminal.

pnpm add @yamada-ui/core @yamada-ui/theme @yamada-ui/utils
Copied!

Next, install the components or hooks you want to use in your project.

Here, let's install @yamada-ui/layouts, which includes Box and others.

pnpm add @yamada-ui/layouts
Copied!

Add ThemeProvider

After installing the core and components, add ThemeProvider, ResetStyle, GlobalStyle to the root of your application, and pass the Default Theme and Default Config from @yamada-ui/theme. If you have your own theme or config, pass those instead.

import { ThemeProvider, ResetStyle, GlobalStyle } from "@yamada-ui/core"
import { defaultTheme, defaultConfig } from "@yamada-ui/theme"
const App = () => {
return (
<ThemeProvider theme={defaultTheme} config={defaultConfig}>
<ResetStyle />
<GlobalStyle />
<YourApplication />
</ThemeProvider>
)
}
Copied!

If you want to support dark mode, also add ColorModeProvider.

import {
ThemeProvider,
ColorModeProvider,
ResetStyle,
GlobalStyle,
} from "@yamada-ui/core"
import { defaultTheme, defaultConfig } from "@yamada-ui/theme"
const App = () => {
return (
<ThemeProvider theme={defaultTheme} config={defaultConfig}>
<ColorModeProvider config={defaultConfig}>
<ResetStyle />
<GlobalStyle />
<YourApplication />
</ColorModeProvider>
</ThemeProvider>
)
}
Copied!

Use Components

Call the components within your application.

import { Box } from "@yamada-ui/layouts"
const Demo = () => {
return <Box>This is Box</Box>
}
Copied!

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 Themes

Learn about Yamada UI's default theme, 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