---
title: Learn the Advanced
description: "Learn the theme, loading, notice, and animation of Yamada UI."
---

# Learn the Advanced

Learn the theme, loading, notice, and animation of Yamada UI.

This guide will help you understand the concepts of Yamada UI. We recommend reading this guide before you start developing with Yamada UI.

:::tip
This guide is basic and is intended to give you a sense of the **fun** of developing with Yamada UI. Therefore, it does not explain each concept and feature in depth. If you want to know more, please check the links within the page.
:::

## Theme

Yamada UI has the same concept as other UI libraries, which is theme.

Theme is an object that can be changed and has [colors](https://yamada-ui.com/docs/theming/tokens/colors.md), [spaces](https://yamada-ui.com/docs/theming/tokens/spaces.md), [font sizes](https://yamada-ui.com/docs/theming/tokens/font-sizes.md), and many other tokens defined.

[Breakpoints](https://yamada-ui.com/docs/theming/breakpoints.md) and [color modes](https://yamada-ui.com/docs/theming/color-mode.md) used in applications can also be easily changed.

Also, [theme switching](https://yamada-ui.com/docs/theming/switching-themes.md) that is not implemented in other UI libraries is supported.

```tsx
const { themeScheme, changeThemeScheme } = useTheme()

return (
  <VStack>
    <Text>The current scheme is "{themeScheme}"</Text>

    <Wrap gap="md" alignItems="center">
      <Badge colorScheme="primary">Primary</Badge>
      <Badge colorScheme="secondary">Secondary</Badge>
      <Tag colorScheme="primary">Primary</Tag>
      <Tag colorScheme="secondary">Secondary</Tag>
    </Wrap>

    <Wrap gap="md">
      <Button onClick={() => changeThemeScheme("base")}>Base Theme</Button>

      <Button colorScheme="red" onClick={() => changeThemeScheme("red")}>
        Red Theme
      </Button>

      <Button colorScheme="green" onClick={() => changeThemeScheme("green")}>
        Green Theme
      </Button>

      <Button colorScheme="blue" onClick={() => changeThemeScheme("blue")}>
        Blue Theme
      </Button>
    </Wrap>
  </VStack>
)
```

:::note
If you want to know more about the theme, please check [this](https://yamada-ui.com/docs/theming.md).
:::

### Layer Styles

Layer styles are tokens used to reuse visual styles across the project.

```tsx preview
<Wrap gap="md" colorScheme="blue">
  <For each={["solid", "subtle", "surface", "ghost", "outline"]}>
    {(token, index) => (
      <Box
        as="button"
        type="button"
        key={index}
        layerStyle={token}
        px="md"
        py="sm"
        rounded="l2"
        _hover={{ layerStyle: `${token}.hover` }}
      >
        {toTitleCase(token)}
      </Box>
    )}
  </For>
</Wrap>
```

:::note
If you want to know more about the layer styles, please check [this](https://yamada-ui.com/docs/styling/layer-styles.md).
:::

### Text Styles

Text styles are tokens used to reuse text styles across the project.

```tsx
<Text textStyle="mono">Mono</Text>
```

:::note
If you want to know more about the text styles, please check [this](https://yamada-ui.com/docs/styling/text-styles.md).
:::

## Loading

Yamada UI supports loading animations needed for applications.

To execute the loading animation, use [useLoading](https://yamada-ui.com/docs/hooks/use-loading.md). [useLoading](https://yamada-ui.com/docs/hooks/use-loading.md) returns instances of `screen`, `page`, and `background`. The instances include several methods.

- `start`: Start the loading animation.
- `update`: Update the loading animation.
- `finish`: Finish the loading animation.
- `force`: Force update the loading animation.

```tsx
const { screen, page, background } = useLoading()

const onLoadingScreen = async () => {
  try {
    screen.start()

    await wait(3000)
  } finally {
    screen.finish()
  }
}

const onLoadingPage = async () => {
  try {
    page.start()

    await wait(3000)
  } finally {
    page.finish()
  }
}

const onLoadingBackground = async () => {
  try {
    background.start()

    await wait(3000)
  } finally {
    background.finish()
  }
}

return (
  <Wrap gap="md">
    <Button onClick={onLoadingScreen}>Start Screen Loading</Button>
    <Button onClick={onLoadingPage}>Start Page Loading</Button>
    <Button onClick={onLoadingBackground}>Start Background Loading</Button>
  </Wrap>
)
```

### Use useAsyncCallback

When executing asynchronous callbacks in applications, [useAsyncCallback](https://yamada-ui.com/docs/hooks/use-async-callback.md) is useful to indicate whether a button or other elements are loading.

```tsx
const [loading, onClick] = useAsyncCallback(async () => {
  await wait(3000)
}, [])

return (
  <Button loading={loading} onClick={onClick}>
    Click me
  </Button>
)
```

`screen` and `page` can also be executed together.

```tsx
const [loading, onClick] = useAsyncCallback(
  async () => {
    await wait(3000)
  },
  [],
  { loading: "page" },
)

return (
  <Button loading={loading} onClick={onClick}>
    Click me
  </Button>
)
```

:::note
If you want to know more about the loading animation, please check [this](https://yamada-ui.com/docs/hooks/use-loading.md).
:::

## Notice

Yamada UI supports notices needed for applications.

To display the notice, use [useNotice](https://yamada-ui.com/docs/hooks/use-notice.md). [useNotice](https://yamada-ui.com/docs/hooks/use-notice.md) returns an instance that displays and controls the notice.

```tsx
const notice = useNotice()

return (
  <Button
    onClick={() =>
      notice({
        title: "シェリル・ノーム",
        description: "私の歌を聴けー！",
      })
    }
  >
    Show Notice
  </Button>
)
```

:::note
If you want to know more about the notice, please check [this](https://yamada-ui.com/docs/hooks/use-notice.md).
:::

## Animation

Yamada UI provides components specialized in CSS animations and animations.

### CSS Animation

[@keyframes](https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes) to apply intermediate states of animations, use `_keyframes`.

```tsx
<Box
  w="fit-content"
  bg="bg.contrast"
  color="fg.contrast"
  p="md"
  animationDirection="alternate"
  animationDuration="1s"
  animationIterationCount="infinite"
  animationTimingFunction="linear"
  _keyframes={{
    from: { translate: "0 0" },
    to: { translate: "100% 0" },
  }}
>
  Box
</Box>
```

Also, you can apply common keyframes throughout your application by using [theme](https://yamada-ui.com/docs/theming.md) [keyframes](https://yamada-ui.com/docs/theming/tokens/keyframes.md). Set the value to `animationName` or `_keyframes`.

```tsx
<Box
  w="fit-content"
  bg="bg.contrast"
  color="fg.contrast"
  p="md"
  animationName="fade-in"
  animationDirection="alternate"
  animationDuration="1s"
  animationIterationCount="infinite"
  animationTimingFunction="linear"
>
  Box
</Box>
```

:::note
If you want to know more about the animation, please check [this](https://yamada-ui.com/docs/styling/animation.md).
:::

### Motion

Yamada UI provides a convenient component that extends the Yamada UI [Style Props](https://yamada-ui.com/docs/styling/style-props.md) to [Motion](https://motion.dev).

```tsx
<Center h="sm">
  <Motion
    boxSize="4xs"
    bg="bg.contrast"
    color="fg.contrast"
    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,
    }}
  />
</Center>
```

[Motion](https://yamada-ui.com/docs/components/motion.md) supports gesture animations.

- `whileHover`: The animation executed when the pointer is moved over the component.
- `whileTap`: The animation executed when the pointer is clicked or tapped on the component.
- `whileFocus`: The animation executed when the component is focused.

```tsx
<Motion
  cursor="pointer"
  w="fit-content"
  p="md"
  bg="bg.contrast"
  color="fg.contrast"
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
  whileFocus={{ scale: 1.1 }}
>
  Click me!
</Motion>
```

:::note
If you want to know more about the `Motion` component, please check [this](https://yamada-ui.com/docs/components/motion.md).
:::

## Congratulations!

Congratulations!🎉

This means you've become a **Wonderful Yamada**🥳

## Learn more

Want to learn more about Yamada UI?😎

- [Learn the Theme](https://yamada-ui.com/docs/theming.md): Yamada UI's theme is customizable and ensures consistency in the application's design.
- [Explore the Components](https://yamada-ui.com/docs/components.md): Yamada UI provides over 130 flexible components. All components support animations and dark mode.
- [Learn the Styling](https://yamada-ui.com/docs/styling.md): All components are designed to be styled using props.
- [Explore the Source Code](https://github.com/yamada-ui/yamada-ui): Yamada UI's package and documentation site are open source. If you like Yamada UI, please star it.