Breakpoints

We use breakpoints from xstyled.

Sizes #

Default size from core theme (values from this article).

theme.screens = {
  xs: 0,
  sm: 480,
  md: 736,
  lg: 980,
  xl: 1280,
}
Copy

Example #

<Box
  display="flex"
  alignItems="center"
  justifyContent="center"
  textAlign="center"
  color={{ xs: 'light.900', lg: 'dark.900' }}
  fontSize={{ lg: 'h2' }}
  h={{ xs: '10rem', lg: '20rem' }}
  backgroundColor={{ xs: 'dark.900', lg: 'primary.100' }}
>
  Resize screen to change this Box 🌝
</Box>
Copy