If you used separate styles imports from @mantine/core/styles/global.css , you need to update imports to use new files. Note that if you previously imported @mantine/core/styles.css , no changes are required – all new files are already included in styles.css .
If you used @mantine/core/styles.css , no changes are required; the import works the same in 7.x and 8.x versions:
The reuseTargetNode prop of the Portal component is now enabled by default. This option improves performance by reusing the target node between portal renders, but in some edge cases, it might cause issues with z-index stacking context.
If you experience issues with z-index , change the reuseTargetNode prop to false in theme:
The Switch component's default styles have been updated; it now includes a checked state indicator inside the thumb. If you want to use the old styles without the indicator, set the withThumbIndicator prop to false in the theme:
@mantine/dates components now use date string values in onChange and other callbacks. If you want to continue using @mantine/dates components the same way as in 7.x, you need to convert callback values to Date objects:
The DatesProvider component no longer supports the timezone option:
If you need to handle timezones in your application, you can use a dedicated date library ( dayjs , luxon , date-fns ) to update timezone values. Example of using Mantine components with dayjs :
The DateTimePicker component no longer accepts the timeInputProps prop, as the underlying TimeInput component was replaced with TimePicker . To pass props down to the TimePicker component, use the timePickerProps prop instead.
The @mantine/code-highlight package no longer depends on highlight.js . You can follow the updated documentation to set up syntax highlighting with shiki .
If you want to continue using highlight.js in your application, install the highlight.js package:
Then wrap your app with CodeHighlightAdapterProvider and provide createHighlightJsAdapter as the adapter prop:
Then you need to add styles from one of the highlight.js themes to your application. You can do that by importing a CSS file from the highlight.js package or adding it via a CDN link to the head of your application:
After that, you can use the CodeHighlight component in your application the same way you did in the 7.x version.
Menu.Item no longer uses the data-hovered attribute to indicate hovered state. If you used data-hovered in your styles, you need to change it to :hover and :focus selectors instead:
Popover now supports the hideDetached prop to automatically close the popover when the target element is removed from the DOM:
By default, hideDetached is enabled – the behavior has changed from the 7.x version. If you prefer to keep the old behavior, you can disable hideDetached for all components:
Starting from the 8.x version, the @mantine/carousel package requires embla-carousel and embla-carousel-react packages with version 8.x.
You need to update embla dependencies:
Update embla props that were previously passed to the Carousel component to emblaOptions . Full list of props:
The useAnimationOffsetEffect hook was removed; it is no longer required, and you need to remove it from your code:
The Embla type is no longer exported from the @mantine/carousel package; you need to change this import to reference the embla-carousel package instead:
6.x to 7.x migration
8.x to 9.x migration