Vanilla extract integration
- Styles are generated at build time – no runtime and performance overhead
- Classes names are scoped to the styles file
- Vanilla extract styles are type safe
- With Vanilla extract you do not have access to postcss-preset-mantine features like
hovermixin. Because of this, you will not be able to copy-paste all demos from Mantine documentation and use them with Vanilla extract.
- Vanilla extract requires additional configuration and setup that may not be available for your build tool/framework. Most popular tools like Next.js and Vite have plugins for Vanilla extract, but if you are using something more niche, you might need to configure it yourself.
Follow the installation instructions to install vanilla extract.
@mantine/vanilla-extract package, it exports
themeToVars function to convert Mantine theme to CSS variables:
You can use one of the following templates to get started or a reference for your own setup. Note that all templates include only minimal setup.
Next.js template with Vanilla extract example
Vite template with Vanilla extract example
Vanilla extract provides createTheme
function which converts given theme object into CSS variables and assigns them to
:root or other selector.
You should not use Vanilla extract
createTheme to generate Mantine theme tokens – all Mantine theme
properties are already exposed as CSS variables. Instead, use
themeToVars function from
to create an object with CSS variables from Mantine theme:
vars object in
*.css.ts files to access Mantine CSS variables:
To convert px to rem or em use
em functions from
vars object contains
darkSelector properties which can be used to
apply styles only in light or dark color scheme:
Note that usually it is more convenient to use only one of them:
apply styles for light color scheme and then override them for dark color scheme
vars.darkSelector (or vice versa):
vars object contains
smallerThan properties which can be used in
@media as a shorthand for
vars.rtlSelector to apply styles only in rtl direction: