Learn the Advanced

In this guide, we will explain the applications of the concepts and features described in Learn the Basics.

Applying Themes

Yamada UI offers a richer set of theme utilities than other UI libraries.

In Learn the Basics, you learned how to use extendTheme for theme inheritance. Here, you will learn how to change the colorScheme set in each component and how to get the value of tokens defined in the theme.

To change the colorScheme set in each component, use withDefaultColorScheme.

We also provide withDefaultSize to change the size, and withDefaultVariant to change the variant.

Using `withDefaultColorScheme`

Most of the components provided by Yamada UI have primary set as the default colorScheme. Use withDefaultColorScheme to change it to secondary.

import { UIProvider, extendTheme } from "@yamada-ui/react"

const customTheme = extendTheme(
  withDefaultColorScheme({
    colorScheme: "secondary",
    components: ["Badge", "Tag", "Button"], // If you pass an empty array, it will be set for all components.
  }),
)()

const App = () => {
  return (
    <UIProvider theme={customTheme}>
      <YourApplication />
    </UIProvider>
  )
}

Copied!

Using `useToken`

In a component, if you want to get the value of a token defined in the theme, use useToken.

Editable example

const bg = useToken("colors", "primary")

return (
  <Box bg={bg} p="md" color="white">
    Primary for color tokens is "{bg}"
  </Box>
)

Copied!

This is suitable for setting the style of components from libraries other than Yamada UI.

If you want to learn more about themes, please check Customize Theme and Component Styles.

Applying Styles

In Learn the Basics, you learned about Style props and shorthand. Here, you will learn about how to change the rendering of elements and the importance of the Yamada UI style system.

About `as`

All components of Yamada UI can perform assertions.

An assertion is a feature that allows you to pass HTML tags or other components to a component, rendering it as a different element or component while retaining the original component's style and behavior.

For example, suppose you need to change the Button to the HTML tag a while retaining its style and behavior.

Editable example

<Button as="a" href="https://github.com/yamada-ui/yamada-ui" target="_blank">
  GitHub
</Button>

Copied!

Yamada UI recommends developers to set as for each component. This is because many components are div, and without properly setting header or footer, you cannot say that you are structuring the text into logical sections. Let's actively set as.

About `sx` and `css`

Yamada UI provides sx and css in addition to Style props for setting styles.

sx: Accepts an object that can use theme tokens similar to Style props and can also describe CSS selectors, etc.
css: Accepts the CSS object of Emotion.

There are hardly any cases where sx and css are necessary. As long as you understand the existence of sx and css in the About Order section explained in the next section, there will be no problem.

Editable example

<Box
  p="md"
  display="flex"
  gap="sm"
  sx={{
    "&:hover > p": {
      color: "danger",
    },
  }}
>
  <Text as="span">Hover me!</Text>
  <Text>This is Text</Text>
</Box>

Copied!

css cannot use Yamada UI's Style props.

About Order

Yamada UI components accept several CSS objects and have a set order.

The order is as follows, and the same property values will be overwritten.

baseStyle: The baseStyle object of the theme
size: The size object of the theme
variant: The variant object of the theme
props: The props of the component's style
sx: The sx props of the component
css: The css props of the component

If you want to learn more about Style props or shortcodes, please check here.

Application of Responsive

In Learn the Basics, you learned how to set up responsive styles. Here, you will learn how to get the current breakpoint and useful utilities.

Using `useBreakpoint`

To get the current breakpoint within a component, use useBreakpoint.

Editable example

const breakpoint = useBreakpoint()

return <Box p="md">The current breakpoint is "{breakpoint}"</Box>

Copied!

Using `useBreakpointValue`

useBreakpointValue is a custom hook that returns the value of the current breakpoint from the object passed as an argument.

Editable example

const breakpoint = useBreakpoint()
const bg = useBreakpointValue({
  base: "red.500",
  "2xl": "pink.500",
  xl: "blue.500",
  lg: "green.500",
  md: "yellow.500",
  sm: "purple.500",
})

return (
  <Box bg={bg} p="md" color="white">
    The current breakpoint is "{breakpoint}"
  </Box>
)

Copied!

This is suitable for setting the style of components from libraries other than Yamada UI.

If you want to learn more about responsive styles, please check here.

Application of Color Mode

In Learn the Basics, you learned how to set the style of color mode. Here, you will learn how to get the current color mode and useful utilities.

Using `useColorMode`

To get the current color mode within a component, use useColorMode.

Editable example

const { colorMode, internalColorMode } = useColorMode()

return (
  <Box p="md">
    The current colorMode is "{colorMode}", internal colorMode is "
    {internalColorMode}"
  </Box>
)

Copied!

colorMode returns the current light or dark.
internalColorMode returns the current light, dark, or system.

Using `useColorModeValue`

useColorModeValue is a custom hook that takes the light mode value as the first argument and the dark mode value as the second argument, and returns the value of the current color mode.

Editable example

const { colorMode } = useColorMode()
const bg = useColorModeValue("blackAlpha.800", "whiteAlpha.800")
const color = useColorModeValue("whiteAlpha.800", "blackAlpha.800")

return (
  <Box p="md" bg={bg} color={color}>
    The current colorMode is "{colorMode}"
  </Box>
)

Copied!

This is suitable for setting the style of components from libraries other than Yamada UI.

If you want to learn more about color modes, please check here.

Application of Animation

In Learn the Basics, you learned about the useAnimation and Motion components. Here, you will learn about setting multiple animations with useAnimation and setting new dynamic animations with useDynamicAnimation. Please check here.

Using Multiple Animations with `useAnimation`

useAnimation can also accept arrays.

Editable example

const animation = useAnimation([
  {
    keyframes: {
      "0%": {
        bg: "red.500",
      },
      "20%": {
        bg: "green.500",
      },
      "40%": {
        bg: "purple.500",
      },
      "60%": {
        bg: "yellow.500",
      },
      "80%": {
        bg: "blue.500",
      },
      "100%": {
        bg: "red.500",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
  {
    keyframes: {
      "0%": {
        h: "xs",
      },
      "50%": {
        h: "md",
      },
      "100%": {
        h: "xs",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
  {
    keyframes: {
      "0%": {
        w: "full",
      },
      "50%": {
        w: "50%",
      },
      "100%": {
        w: "full",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
])

return (
  <Box h="md">
    <Box w="full" h="xs" animation={animation} />
  </Box>
)

Copied!

Usage of `useDynamicAnimation`

useDynamicAnimation takes an object as an argument. The keys of the object become the keys of the animation, and the animation changes by passing the key as an argument to setState.

Editable example

const [animation, setAnimation] = useDynamicAnimation({
  moveLeft: {
    keyframes: {
      "0%": {
        transform: "translateX(400%)",
      },
      "100%": {
        transform: "translateX(0%)",
      },
    },
    duration: "slower",
    fillMode: "forwards",
    timingFunction: "ease-in-out",
  },
  moveRight: {
    keyframes: {
      "0%": {
        transform: "translateX(0%)",
      },
      "100%": {
        transform: "translateX(400%)",
      },
    },
    duration: "slower",
    fillMode: "forwards",
    timingFunction: "ease-in-out",
  },
})

return (
  <VStack alignItems="flex-start">
    <Button
      onClick={() =>
        setAnimation((prev) =>
          prev === "moveRight" ? "moveLeft" : "moveRight",
        )
      }
    >
      Click me!
    </Button>

    <Box bg="primary" p="md" rounded="md" color="white" animation={animation}>
      Box
    </Box>
  </VStack>
)

Copied!

It is also possible to combine dynamic animations and multiple animations.

Editable example

const [animation, setAnimation] = useDynamicAnimation<
  Record<"moveLeft" | "moveRight", AnimationStyle[]>
>({
  moveLeft: [
    {
      keyframes: {
        "0%": {
          transform: "translateX(400%)",
        },
        "100%": {
          transform: "translateX(0%)",
        },
      },
      duration: "slower",
      fillMode: "forwards",
      timingFunction: "ease-in-out",
    },
    {
      keyframes: {
        "0%": {
          bg: "secondary",
        },
        "100%": {
          bg: "primary",
        },
      },
      duration: "slower",
      fillMode: "forwards",
      timingFunction: "ease-in-out",
    },
  ],
  moveRight: [
    {
      keyframes: {
        "0%": {
          transform: "translateX(0%)",
        },
        "100%": {
          transform: "translateX(400%)",
        },
      },
      duration: "slower",
      fillMode: "forwards",
      timingFunction: "ease-in-out",
    },
    {
      keyframes: {
        "0%": {
          bg: "primary",
        },
        "100%": {
          bg: "secondary",
        },
      },
      duration: "slower",
      fillMode: "forwards",
      timingFunction: "ease-in-out",
    },
  ],
})

return (
  <VStack alignItems="flex-start">
    <Button
      onClick={() =>
        setAnimation((prev) =>
          prev === "moveRight" ? "moveLeft" : "moveRight",
        )
      }
    >
      Click me!
    </Button>

    <Box bg="primary" p="md" rounded="md" color="white" animation={animation}>
      Box
    </Box>
  </VStack>
)

Copied!

If you want to learn more about animations, please check here.

Congratulations!

Congratulations🎉

Now, you can become Wonderful Yamada🥳

Learn More

Want to know more about Yamada UI? Why not learn about themes and components? 😎

Learn about the default theme of Yamada UI, and how to create and modify the values of color, font, and other theme elements.

Yamada UI offers over 100 flexible components. All components support animations and dark mode.

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

Edit this page on GitHub

PreviousLearn the Basics NextFramework

Learn the Advanced

Applying Themes

Using `withDefaultColorScheme`

Using `useToken`

Applying Styles

About `as`

About `sx` and `css`

About Order

Application of Responsive

Using `useBreakpoint`

Using `useBreakpointValue`

Application of Color Mode

Using `useColorMode`

Using `useColorModeValue`

Application of Animation

Using Multiple Animations with `useAnimation`

Usage of `useDynamicAnimation`

Congratulations!

Learn More

Learn about Themes

Explore Components

Explore the Source Code

Learn the Advanced

Using withDefaultColorScheme

Using useToken

Applying Styles

About as

About sx and css

About Order

Application of Responsive

Using useBreakpoint

Using useBreakpointValue

Application of Color Mode

Using useColorMode

Using useColorModeValue

Application of Animation

Using Multiple Animations with useAnimation

Usage of useDynamicAnimation

Congratulations!

Learn More

Learn about Themes

Explore Components

Explore the Source Code

Using `withDefaultColorScheme`

Using `useToken`

About `as`

About `sx` and `css`

Using `useBreakpoint`

Using `useBreakpointValue`

Using `useColorMode`

Using `useColorModeValue`

Using Multiple Animations with `useAnimation`

Usage of `useDynamicAnimation`