@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 approach to make your app responsive is to
add styles with createStyles function.
theme.breakpoints are used in all responsive Mantine components. Breakpoints are set in px (rem, em and other values are not supported).
You can configure these values with MantineProvider:
theme.breakpoints values are the same as in Bootstrap:
Most of layout components support responsive features. This section includes basic responsive features, visit components documentation to learn more.
Grid component allows you to set columns span based on
Grid is based on flexbox and can be used in older browsers (IE11+):
SimpleGrid component allows you to create a layout with given amount of columns with equal width. SimpleGrid is based on CSS grid and can have issue in older browsers (IE11+):
AppShell component can be used to create a common layout pattern:
Header – Navbar – Content:
AppShell includes several responsive features with which you can build collapsible Navbar without any additional styles (demo):
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 lets you apply styles to given component or element if given media query matches:
Most of Mantine components support
size prop with
You cannot change these values within component props. Instead you can use MediaQuery component
to render different components based on media query:
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: