Version v7.0.0 | Mantine

submited by
Style Pass
2023-09-19 10:30:09

Mantine no longer depends on Emotion for styles generation. All @mantine/* packages are now shipped with native CSS files which can be imported from @mantine/{package}/styles.css, for example:

This change improves performance, reduces bundle size of the library and allows using Mantine in environments where CSS-in-JS is not supported (or supported with limitations), for example, Next.js app directory.

It is now recommended to use CSS modules to style Mantine components. To update your project to CSS modules, follow the 6.x → 7.x migration guide.

If you prefer CSS-in-JS syntax for styling, you can use Vanilla extract as a TypeScript CSS preprocessor. You will be able to use most of Mantine styling features with Vanilla extract.

All components now support system color scheme – when colorScheme value is auto, components will use prefers-color-scheme media query to determine if the user prefers light or dark color scheme.

Note that auto is not the default value. You need to set it manually to enable system color scheme support both on MantineProvider and in ColorSchemeScript:

Leave a Comment