Individual Installation
Many pages, such as Learn the Basics and Learn the Advanced, assume that you have installed everything from All.
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
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
The package names for components and hooks are listed on each documentation page.
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>)}
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>)}
If you want to customize your theme or config, please check Customize Theme and Customize Config.
If you do not pass theme or config to ThemeProvider, the component styles and tokens will not be reflected.
Use Components
Call the components within your application.
import { Box } from "@yamada-ui/layouts"const Demo = () => {return <Box>This is Box</Box>}
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