Breakpoints

React

A set of breakpoint presets are available to build responsive interfaces. Using Chakra's Responsive Styles feature, it's possible to generate media queries automatically by simply passing a responsive value to any prop that supports responsive styles.

Responsive Props

All style props are responsive by default.

Object Style

Array Style

Prefer Object Style

Using arrays for responsive props is discouraged as it is hard to read and requires every breakpoint in the desired responsive range to be specified.

Interstitial breakpoints must be filled with null.

It does allow you to do something silly like this if you need to, though...

Responsive Presets

The size and variant theme presets support responsive values as well. If you need to make something like colorScheme responsive, you'll need to use useBreakpointValue.

Note

Because size and variant presets are applied with media queries, you may need to append !important in order to override size and styles that are applied responsively.

Bootstrap

Bootstrap incorporates responsive breakpoints into its various utility classes. See the spacing notation for an example.

Default Bootstrap Breakpoints

The default Bootstrap breakpoints such as sm, md, lg, etc. are still supported, but they are deprecated and mapped to the closest breakpoint in the system tokens. They will be removed entirely in the next major release.