Responsive styles
@mantine/core
package exports several components that can help you organize responsive styles without writing CSS.
Note that in most cases that are not covered in this guide, the best way to make your app responsive is to
add styles with createStyles function.
Configure breakpoints
theme.breakpoints
are used in all responsive Mantine components. Breakpoints are set in px
(rem
, em
and other units are not supported).
You can configure these values with MantineProvider:
Default theme.breakpoints
values:
Breakpoint | Viewport width |
---|---|
xs | 576px |
sm | 768px |
md | 992px |
lg | 1200px |
xl | 1400px |
Media queries in createStyles
In most cases using createStyles function is cleanest way to add responsive styles to any element. Consider using it first before hacking your way out of writing CSS with other approaches:
MediaQuery component
MediaQuery component lets you apply styles to given component or element if given media query matches:
Changing component size based on media query
Most of Mantine components support size
prop with xs
, sm
, md
, lg
and xl
values.
You cannot change these values within component props. Instead you can use MediaQuery component
to render different components based on media query:
The approach with MediaQuery component will work with SSR. If you do not need SSR support the more cleaner way to change size is to use use-media-query hook:
Inline media queries with sx
All Mantine components support sx
prop with which you can add styles (including responsive styles) to root component element:
If you want to add styles with sx
prop to non-Mantine component, you can wrap it in Box: