Responsive Styles

Chakra UI support responsive styles out of the box. Instead of manually adding @media queries and adding nested styles throughout your code, Chakra UI allows you provide array values to add mobile-first responsive styles.

We use the @media(min-width) media queries to ensure values are mobile-first.

<>
  <Box
    height="40px"
    bg="teal.400"
    width={[
      "100%", // base
      "50%", // 480px upwards
      "25%", // 768px upwards
      "15%", // 992px upwards
    ]}
  />
  {/* responsive font size */}
  <Box fontSize={["sm", "md", "lg", "xl"]}>Font Size</Box>
  {/* responsive margin */}
  <Box mt={[2, 4, 6, 8]} width="full" height="24px" bg="tomato" />
  {/* responsive padding */}
  <Box bg="papayawhip" p={[2, 4, 6, 8]}>
    Padding
  </Box>
</>

<>
  <Box
    height="40px"
    bg="teal.400"
    width={[
      "100%", // base
      "50%", // 480px upwards
      "25%", // 768px upwards
      "15%", // 992px upwards
    ]}
  />
  {/* responsive font size */}
  <Box fontSize={["sm", "md", "lg", "xl"]}>Font Size</Box>
  {/* responsive margin */}
  <Box mt={[2, 4, 6, 8]} width="full" height="24px" bg="tomato" />
  {/* responsive padding */}
  <Box bg="papayawhip" p={[2, 4, 6, 8]}>
    Padding
  </Box>
</>

This works for every style props in the theme specification, which means you can change the style of most properties at a given breakpoint.

What it does#

This shortcut is an alternative to writing media queries out by hand. Given the following:

<Box width={['100%', 1 / 2, 1 / 4]} />
or
<Box width={['100%', 0.5, 0.25]} />

<Box width={['100%', 1 / 2, 1 / 4]} />
or
<Box width={['100%', 0.5, 0.25]} />

It'll generate a CSS that looks like this

.Box {
  width: 100%;
}

@media screen and (min-width: 40em) {
  .Box {
    width: 50%;
  }
}

@media screen and (min-width: 52em) {
  .Box {
    width: 25%;
  }
}

.Box {
  width: 100%;
}
@media screen and (min-width: 40em) {
  .Box {
    width: 50%;
  }
}
@media screen and (min-width: 52em) {
  .Box {
    width: 25%;
  }
}

NOTE: In the shortcut example '100%' is used instead of 1 because in the default Chakra UI theme, theme.sizes[1] = 0.25rem. This means that using a prop like width={1} will render a width of 4px and not '100%'

The equivalent of this style if you passed it as an object.

// First, create an alias for breakpoints
const breakpoints = ["30em", "48em", "62em", "80em"];
// aliases
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3];

// First, create an alias for breakpoints
const breakpoints = ["30em", "48em", "62em", "80em"];
// aliases
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3];

then

<Box width={{ base: 1, sm: 1 / 2, md: 1 / 4 }} />

<Box width={{ base: 1, sm: 1 / 2, md: 1 / 4 }} />

Demo#

Here's a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens (resize your browser to see it in action):

Marketing

Finding customers for your new business

Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.

<Box p={4} display={{ md: "flex" }}>
  <Box flexShrink="0">
    <Image
      rounded="lg"
      width={{ md: 40 }}
      src="https://bit.ly/2jYM25F"
      alt="Woman paying for a purchase"
    />
  </Box>
  <Box mt={{ base: 4, md: 0 }} ml={{ md: 6 }}>
    <Text
      fontWeight="bold"
      textTransform="uppercase"
      fontSize="sm"
      letterSpacing="wide"
      color="teal.600"
    >
      Marketing
    </Text>
    <Link
      mt={1}
      display="block"
      fontSize="lg"
      lineHeight="normal"
      fontWeight="semibold"
      href="#"
    >
      Finding customers for your new business
    </Link>
    <Text mt={2} color="gray.500">
      Getting a new business off the ground is a lot of hard work. Here are five
      ideas you can use to find your first customers.
    </Text>
  </Box>
</Box>

<Box p={4} display={{ md: "flex" }}>
  <Box flexShrink="0">
    <Image
      rounded="lg"
      width={{ md: 40 }}
      src="https://bit.ly/2jYM25F"
      alt="Woman paying for a purchase"
    />
  </Box>
  <Box mt={{ base: 4, md: 0 }} ml={{ md: 6 }}>
    <Text
      fontWeight="bold"
      textTransform="uppercase"
      fontSize="sm"
      letterSpacing="wide"
      color="teal.600"
    >
      Marketing
    </Text>
    <Link
      mt={1}
      display="block"
      fontSize="lg"
      lineHeight="normal"
      fontWeight="semibold"
      href="#"
    >
      Finding customers for your new business
    </Link>
    <Text mt={2} color="gray.500">
      Getting a new business off the ground is a lot of hard work. Here are five
      ideas you can use to find your first customers.
    </Text>
  </Box>
</Box>

Editable Example

Proudly made in 🇳🇬

Released under the MIT License.

Responsive Styles

.css-12m0k8p{pointer-events:auto;}What it does.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Demo#

What it does#