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.
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, spaces, font sizes, and many other tokens defined.
Breakpoints and color modes used in applications can also be easily changed.
Also, theme switching that is not implemented in other UI libraries is supported.
The current scheme is "base"
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>
)
"use client" to the top of the file.Layer Styles
Layer styles are tokens used to reuse visual styles across the project.
<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>
Text Styles
Text styles are tokens used to reuse text styles across the project.
Mono
<Text textStyle="mono">Mono</Text>
Loading
Yamada UI supports loading animations needed for applications.
To execute the loading animation, use useLoading. useLoading 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.
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 client" to the top of the file.Use useAsyncCallback
When executing asynchronous callbacks in applications, useAsyncCallback is useful to indicate whether a button or other elements are loading.
const [loading, onClick] = useAsyncCallback(async () => {
await wait(3000)
}, [])
return (
<Button loading={loading} onClick={onClick}>
Click me
</Button>
)
"use client" to the top of the file.screen and page can also be executed together.
const [loading, onClick] = useAsyncCallback(
async () => {
await wait(3000)
},
[],
{ loading: "page" },
)
return (
<Button loading={loading} onClick={onClick}>
Click me
</Button>
)
"use client" to the top of the file.Notice
Yamada UI supports notices needed for applications.
To display the notice, use useNotice. useNotice returns an instance that displays and controls the notice.
const notice = useNotice()
return (
<Button
onClick={() =>
notice({
title: "シェリル・ノーム",
description: "私の歌を聴けー！",
})
}
>
Show Notice
</Button>
)
"use client" to the top of the file.Animation
Yamada UI provides components specialized in CSS animations and animations.
CSS Animation
@keyframes to apply intermediate states of animations, use _keyframes.
<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 keyframes. Set the value to animationName or _keyframes.
<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>
Motion
Yamada UI provides a convenient component that extends the Yamada UI Style Props to Motion.
<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 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.
<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>
Motion component, please check this.Congratulations!
Congratulations!🎉
This means you've become a Wonderful Yamada🥳
Learn more
Want to learn more about Yamada UI?😎
Learn the Theme
Yamada UI's theme is customizable and ensures consistency in the application's design.
Explore the Components
Yamada UI provides over 130 flexible components. All components support animations and dark mode.
Learn the Styling
All components are designed to be styled using props.
Explore the Source Code
Yamada UI's package and documentation site are open source. If you like Yamada UI, please star it.