New @mantine/emotion package is now available to simplify migration from 6.x to 7.x . It includes createStyles function and additional functionality for sx and styles props for all components similar to what was available in @mantine/core package in v6.
If you still haven't migrated to 7.x because of the change in styling approach, you can now have a smoother transition by using @mantine/emotion package. To learn more about the package, visit the documentation page and updated 6.x to 7.x migration guide .
All @mantine/* components and hooks have been updated to support React 18.3. It is recommended to update your application as well to prepare for the upcoming React 19 release .
New use-field hook is now available in @mantine/form package. It can be used as a simpler alternative to use-form hook to manage state of a single input without the need to create a form. The hook supports most of use-form hook features: validation with function, touched and dirty state, error message, validation on change/blur and more.
use-field hook also supports async validation:
You can now define custom mixins that are not included in mantine-postcss-preset by specifying them in the mixins option. To learn about mixins syntax, follow postcss-mixins documentation . Note that this feature is available in postcss-preset-mantine starting from version 1.15.0.
Example of adding clearfix and circle mixins:
Then you can use these mixins in your styles:
New use-matches hook exported from @mantine/core is an alternative to use-media-query if you need to match multiple media queries and values. It accepts an object with media queries as keys and values at given breakpoint as values.
Note that use-matches hook uses the same logic as use-media-query under the hood, it is not recommended to be used as a primary source of responsive styles, especially if you have ssr in your application.
In the following example:
BarChart now supports withBarValueLabel prop that allows displaying value label on top of each bar: