Leave Yamada UI a star

Star
Yamada UIYamada UIv1.4.5

Minimal Installation

Install the package

Install the core and utilities of Yamada UI.

Execute one of the following commands in the terminal.

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

Using ui

After installation, call ui within your application.

ui is an object of JSX elements enabled with the Yamada UI style system and can also be used as a function to allow custom components to receive the Yamada UI style system.

Use the ui.<element> notation to create basic HTML elements with a style system.
For example, to create a plain HTML div element with a style system, write <ui.div />.

import { ui } from "@yamada-ui/core"
const Demo = () => {
return (
<ui.div>
<ui.p>This is div</ui.p>
</ui.div>
)
}
Copied!

To set styles, pass props.

Let's try it with button this time.

Editable example

<ui.button
  background="#ef4444"
  color="#ffffff"
  padding="1rem"
  borderRadius=".5rem"
  _hover={{ background: "#dc2626" }}
>
  Click me!
</ui.button>
Copied!

Create a component

ui can be used in two ways: as a JSX element <ui.div /> and as a function ui('div') that returns a JSX element.

The function is suitable for creating simple components.

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

You can also set default styles.

import { ui } from "@yamada-ui/core"
const Button = ui("button", {
baseStyle: {
background: "#ef4444",
color: "#ffffff",
padding: "1rem",
borderRadius: ".5rem",
_hover: { background: "#dc2626" },
},
})
const Demo = () => {
return <Button>Click me!</Button>
}
Copied!

If you want to use animation

Yamada UI provides many utilities for animation, such as the Motion component specialized for animation and useAnimation, which can be described like CSS keyframes.

Using useAnimation

Install @yamada-ui/use-animation.

pnpm add @yamada-ui/use-animation
Copied!

Editable example

const animation = useAnimation({
  keyframes: {
    "0%": {
      bg: "#ef4444",
    },
    "20%": {
      bg: "#22c55e",
    },
    "40%": {
      bg: "#a855f7",
    },
    "60%": {
      bg: "#eab308",
    },
    "80%": {
      bg: "#3b82f6",
    },
    "100%": {
      bg: "#ef4444",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

return <ui.div w="full" h="xs" animation={animation} />
Copied!

Using Motion

Install @yamada-ui/motion.

pnpm add @yamada-ui/motion
Copied!

Editable example

<ui.div
  display="flex"
  placeContent="center"
  placeItems="center"
  w="100%"
  h="24rem"
>
  <Motion
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 180, 180, 0],
      borderRadius: ["0%", "0%", "50%", "50%", "0%"],
    }}
    transition={{
      duration: 2,
      ease: "easeInOut",
      times: [0, 0.2, 0.5, 0.8, 1],
      repeat: Infinity,
      repeatDelay: 1,
    }}
    w="7.5rem"
    h="7.5rem"
    bg="primary"
  />
</ui.div>
Copied!

If you want to use tokens such as colors and spaces

If you want to use the Default Theme of Yamada UI, install @yamada-ui/theme.

pnpm add @yamada-ui/theme
Copied!

After installing the theme, 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 that instead.

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

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 animation and dark mode.

Explore the Source Code

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

Edit this page on GitHub

PreviousGetting StartedNextLearn the Basics