Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

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? 😎

Edit this page on GitHub