Responsive Styles

Yamada UI supports ready-to-use responsive styles. Just pass an object to the style's props to support PC-first responsive styles.

About Breakpoints

Responsive styles refer to the breakpoints defined in the theme. Yamada UI has a Default Theme where breakpoints are defined.

Here are the actual defined values.

export const breakpoints = {
  sm: "30em", // 480px
  md: "48em", // 768px
  lg: "61em", // 976px
  xl: "80em", // 1280px
  "2xl": "90em", // 1440px
}

Syntax for Responsive Styles

To set responsive styles, simply pass an object to the style's props to support PC-first responsive styles.

• 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
  w="full"
  p="md"
  bg={{ base: "primary", "2xl": "secondary", xl: "warning", lg: "danger" }}
  color="white"
>
  This is Box
</Box>

The above code generates the following CSS.

.Box {
  background: var(--ui-colors-primary);

  @media screen and (max-width: 1440px) {
    background: var(--ui-colors-secondary);
  }

  @media screen and (max-width: 1280px) {
    background: var(--ui-colors-warning);
  }

  @media screen and (max-width: 976px) {
    background: var(--ui-colors-warning);
  }

  @media screen and (max-width: 480px) {
    background: var(--ui-colors-danger);
  }
}

Responsive Utilities

Yamada UI provides useful custom hooks for building responsive layouts.

Using useBreakpoint

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

const breakpoint = useBreakpoint()

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

Usage of useBreakpointValue

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

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.

Customizing Breakpoints

Depending on the scenario, you may need to define the breakpoints of your application.

We recommend using common aliases such as sm, md, lg, xl, etc.

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

const breakpoints = {
  sm: "376px",
  md: "768px",
  lg: "960px",
  xl: "1200px",
  "2xl": "1440px",
}

const customTheme = extendTheme({ breakpoints })({ omit: "breakpoints" })

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