Responsive Styles

Chakra UI Vue supports 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.

Responsive syntax relies on the breakpoints defined in the theme object. Chakra UI provides default breakpoints, here's what it looks like:

const breakpoints = {
  sm: '30em', // 480px upwards
  md: '48em', // 768px upwards
  lg: '62em', // 992px upwards
  xl: '80em', // 1280px upwards
  '2xl': '96em' // 1536px upwards
}

To make styles responsive, you can use either the array or object syntax.

The Array syntax#

All style props accept arrays as values for mobile-first responsive styles. This is the recommended method.

<template>
  <c-box
    height="40px"
    bg="green.400"
    :width="[
      '100%', // base
      '50%', // 480px upwards
      '25%', // 768px upwards
      '15%', // 992px upwards
    ]"
  />
  <!-- responsive font size -->
  <c-box :fontSize="['sm', 'md', 'lg', 'xl']">Font Size</c-box>
  <!-- responsive margin  -->
  <c-box :mt="[2, 4, 6, 8]" width="full" height="24px" bg="tomato" />
  <!-- responsive padding -->
  <c-box bg="papayawhip" :p="[2, 4, 6, 8]">
    Padding
  </c-box>
</template>

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:

<c-box :width="['100%', 1 / 2, 1 / 4]" />
or
<c-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%;
  }
}

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

To interpret array responsive values, Chakra UI converts the values defined in theme.breakpoints and sorts them in ascending order. Afterward, we map the values defined in the array to the breakpoints

// This is the default breakpoint
const breakpoints = {
  sm: '30em',
  md: '48em',
  lg: '62em',
  xl: '80em',
  '2xl': '96em'
}

// Internally, we transform to this
const breakpoints = ['0em', '30em', '48em', '62em', '80em', '96em']

Here's how to interpret this syntax:

• 300px: From 0em upwards
• 400px: From 30em upwards
• 500px: From 48em upwards

To skip certain breakpoints, you can pass null to any position in the array to avoid generating unnecessary CSS.

The Object syntax#

You can also define responsive values with breakpoint aliases in an object. Any undefined alias key will define the base, non-responsive value.

Let's say you have a CText that looks like this:

<c-text font-size='40px'>This is a text</c-text>

To make the fontSize responsive using the object syntax, here's what you need to do:

<c-text :font-size="{ base: '24px', md: '40px', lg: '56px' }">
  This is responsive text
</c-text>

Remember, Chakra UI uses the min-width media query for responsive design. The breakpoints are: sm = 30em, md = 48em, lg = 62em, xl = 80em

Here's how to interpret this syntax:

• base: From 0em upwards
• md: From 48em upwards
• lg: From 62em upwards

Customizing Breakpoints#

In some scenarios, you might need to define custom breakpoints for your application. We recommended using common aliases like sm, md, lg, and xl.

To define custom breakpoints, pass them as an object containing the aliases.

Note: Ensure the css unit of your breakpoints are the same. Use all px or all em, don't mix them.

// 1. Import the utilities
import { extendTheme } from '@chakra-ui/vue'

// 2. Update the breakpoints as key-value pairs
const customBreakpoints = {
  sm: '320px',
  md: '768px',
  lg: '960px',
  xl: '1200px',
  '2xl': '1536px'
}

// 3. Extend the theme
Vue.use(Chakra, {
  extendTheme: {
    breakpoints: customBreakpoints
    ...
  }
}

// 4. Now you can use the custom breakpoints
<c-box :width={ base: '100%', sm: '50%', md: '25%' } />

Note: If you're using pixels as breakpoint values make sure to always provide a value for the 2xl breakpoint, which by its default pixels value is "1536px".

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):

<c-box p="4" :display="{ md: 'flex' }">
  <c-box flex-shrink="0">
    <c-image
      rounded="lg"
      :width="{ md: 40 }"
      src="https://bit.ly/2jYM25F"
      alt="Woman paying for a purchase"
    />
  </c-box>
  <c-box :mt="{ base: 4, md: 0 }" :ml="{ md: 6 }">
    <c-text
      font-weight="bold"
      text-transform="uppercase"
      font-size="sm"
      letter-spacing="wide"
      color="vue.600"
    >
      Marketing
    </c-text>
    <c-link
      mt="1"
      display="block"
      font-size="lg"
      line-height="normal"
      color="black"
      font-weight="semibold"
      href="#"
    >
      Finding customers for your new business
    </c-link>
    <c-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.
    </c-text>
  </c-box>
</c-box>