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

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. notation to create basic HTML elements with a style system.
For example, to create a plain HTML div element with a style system, write .

import { ui } from "@yamada-ui/core"

const Demo = () => {
  return (
    <ui.div>
      <ui.p>This is div</ui.p>
    </ui.div>
  )
}

To set styles, pass props.

Let's try it with button this time.

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

Create a component

ui can be used in two ways: as a JSX element 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>
}

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>
}

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

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} />

Using Motion

Install @yamada-ui/motion.

pnpm add @yamada-ui/motion

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

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

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>
  )
}

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>
  )
}

Start Learning

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