You can now sponsor Mantine development with OpenCollective . All funds are used to improve Mantine and create new features and components.
This changelog covers breaking changes and new features in Mantine 8.0. To migrate your application to Mantine 8.0, follow 7.x → 8.x migration guide .
Global styles are now split between 3 files:
If you previously imported individual styles from @mantine/core package, you need to update imports to use new files:
If you imported @mantine/core/styles.css , no changes are required – all new files are already included in styles.css .
Menu component now supports submenus:
Popover component now supports hideDetached prop to configure how the dropdown behaves when the target element is hidden with styles ( display: none , visibility: hidden , etc.), removed from the DOM, or when the target element is scrolled out of the viewport.
By default, hideDetached is enabled – the dropdown is hidden with the target element. You can change this behavior with hideDetached={false} . To see the difference, try to scroll the root element of the following demo:
All @mantine/dates components now use date strings in YYYY-MM-DD or YYYY-MM-DD HH:mm:ss format instead of Date objects. This change was made to resolve issues related to timezones – now the output of all @mantine/dates components does not include any timezone-specific information. Follow 7.x → 8.x migration guide to learn how to update the code to use new string values.
Example of using DatePicker component with string values:
DatesProvider component no longer supports timezone option – all @mantine/dates components now use strings in YYYY-MM-DD HH:mm:ss format as values and do not contain timezone information.
If you need to handle timezones in your application, you can use a dedicated dates library ( dayjs , luxon , date-fns ) to update timezone values.
Example of using Mantine components with dayjs :
New TimePicker component is an alternative to TimeInput that offers more features. It supports 24-hour and 12-hour formats, dropdown with hours, minutes and seconds, and more.
DateTimePicker component now uses TimePicker under the hood instead of TimeInput . You can now use all TimePicker features with DateTimePicker component.
Prop timeInputProps is no longer available, to pass props down to the underlying TimePicker you need to use timePickerProps prop.
Example of enabling dropdown and setting 12h format for time picker:
New TimeValue component can be used to display a formatted time string with similar formatting options to TimePicker component.
New TimeGrid component allows to capture time value from the user with a predefined set of time slots:
New Heatmap component allows to display data in a calendar heatmap format:
@mantine/code-highlight package no longer depends on highlight.js . Instead, it now provides a new API based on adapters that allows using any syntax highlighter of your choice. Out of the, box @mantine/code-highlight provides adapters for shiki and highlight.js .
To learn about the migration process and how to use the new adapters API, check the updated CodeHighlight documentation and 7.x → 8.x migration guide .
You can now use CodeHighlight component with shiki .
Shiki library provides the most advanced syntax highlighting for TypeScript and CSS/Sass code. It uses textmate grammars to highlight code (same as in VSCode). Shiki adapter is recommended if you need to highlight advanced TypeScript (generics, jsx nested in props) or CSS code (custom syntaxes, newest features). Shiki adapter is used for all code highlighting in Mantine documentation.
To use shiki adapter, you need to install shiki package:
Then wrap your app with CodeHighlightAdapterProvider and provide createShikiAdapter as adapter prop:
After that, you can use CodeHighlight component in your application:
@mantine/carousel package was updated to use the latest version of embla-carousel-react package. This update includes breaking changes:
Follow the 7.x → 8.x migration guide to update your application to use the latest version of @mantine/carousel .
Switch component styles were updated to include indicator inside the thumb. You can change it by setting withThumbIndicator prop:
You can now augment spacing , radius , breakpoints , fontSizes , lineHeights , and shadows types. To learn more about this feature, follow this guide .
Example of types augmentation for spacing and radius :