Responsive Design
Yamada UI provides features to change styles according to the screen size.
@media(max-width) media queries is adopted. If you want to use @media(min-width) media queries, please refer to here.Overview
Responsive design refers to the breakpoints defined in the theme. Yamada UI has a Default Theme where breakpoints are defined.
Usage
To set responsive design to Style Props, set an object with the breakpoints as the key.
- The keys of the object define the keys set in the theme's Breakpoints.
- The values of the object define the values of the styles set by the key.
<Box p="md" color="fg.contrast" bg={{ base: "bg.contrast", md: "success" }}>
Box
</Box>
The above code generates the following CSS:
.Box {
background: var(--ui-colors-bg-contrast);
@media screen and (max-width: 768px) {
background: var(--ui-colors-success);
}
}
Utilities
Yamada UI provides useful custom hooks for building responsive layouts.
useBreakpoint
A custom hook that returns the current breakpoint. This hook monitors the window size and returns the appropriate value.
useBreakpointEffect
A custom hook that executes a specific callback function when the breakpoint changes.
useUpdateBreakpointEffect
A custom hook that skips the side effect on the initial render and executes a specific callback function when the breakpoint changes.
useBreakpointState
A custom hook that returns the current breakpoint from the provided object as the initial value.
useBreakpointValue
A custom hook that returns the value of the current breakpoint from the provided object. This hook monitors changes in the window size and returns the appropriate value.