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.

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:

It'll generate a CSS that looks like this

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.

then

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

Woman paying for a purchase

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.

Editable Example

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo