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
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
The equivalent of this style if you passed it as an object.
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):
MarketingFinding 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.
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2019 Segun Adebayo