Leave Yamada UI a star

Star
Yamada UIYamada UIv1.3.4

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.

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

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

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

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>

About sx and css

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

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>

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.

  1. baseStyle: The baseStyle object of the theme
  2. size: The size object of the theme
  3. variant: The variant object of the theme
  4. props: The props of the component's style
  5. sx: The sx props of the component
  6. css: The css props of the component

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>

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",
  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>
)

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

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

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

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

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

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

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

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 Themes

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

Explore Components

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

Explore the Source Code

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 BasicsNextFramework