Mantine Help Center

32 frequently asked and general questions for Mantine 7.0+

about

How can I contribute to the library?

There are multiple ways to contribute even without writing code

Where can I find the roadmap?

The roadmap is private and only available to the team.

common

Is there DataGrid component that I can use with Mantine?

A list of community packages that provide DataGrid component that can be used with Mantine.

How can I lock scroll in my application?

Use react-remove-scroll library to lock scroll in your application

MantineProvider was not found in component tree. What should I do?

Learn how to resolve MantineProvider issues

next.js

How can I load fonts in Next.js?

A guide to load custom fonts in Next.js with CSS and next/font package

Can I use Mantine components as server components?

Learn about use client directive and server components usage

tooling

Can I use Mantine with Astro?

No, Astro does not support React context

Can I use Mantine with Create React App (CRA)?

Learn how to use Mantine without postcss-preset-mantine or how to eject CRA and customize webpack.config.js and use postcss-preset-mantine

How can I lint CSS files?

Learn how to setup Stylelint for Mantine postcss syntax

How to update Mantine dependencies?

Learn how to update @mantine/*, @mantinex/* and postcss-preset-mantine dependencies manually or with ncu script

How can I load fonts in Vite?

A guide to load custom fonts in Vite

styles

How to align input with a button in a flex container?

Lean how to align Mantine inputs with buttons using Group component

How can I change component color prop value depending on the color scheme?

Learn how to use CSS variables resolver to change color value depending on the color scheme

I do not have styles in my dates components...

Because you did not import styles

How can I add dynamic CSS styles?

Use data attributes, CSS variables or inline styles

How can I add hover styles to an element?

Learn how to add hover classes to an element with CSS modules, &:hover or @mixin hover

How can I get current color scheme value in JavaScript?

How to use useMantineColorScheme and useComputedColorScheme hooks to get current color scheme value in JavaScript

How can I change inputs focus styles?

Learn how to use Styles API with Mantine inputs

How to change inputs placeholder color?

Learn how to change placeholder color with Styles API

Can I use private CSS variables to style components?

No, it is not safe and will not work with future versions of Mantine.

How can I change Tabs border color?

Learn how to use Styles API with Tabs component

Can I use Mantine with Emotion/styled-components/tailwindcss?

Learn about limitations of third-party styles

forms

Browser zooms in when input is focused. What should I do?

Use meta tag to disable browser scaling or increase input size

How can I disable all inputs/inputs group inside form?

Learn how to disable all inputs/inputs group inside form with unstyled Fieldset component

How to use Dropzone with @mantine/form?

Learn how to use Dropzone with @mantine/form to handle file selection state

Is there a way to add mask to Mantine input?

Learn how to integrate mask libraries with Mantine inputs

components

Is there a floating action button component?

No, but you can build it with Affix and ActionIcon components

How to call a function when Modal/Drawer closes and animation completes?

How to use transitionProps in Modal/Drawer components

How to prevent Modal from closing?

Learn how to prevent Modal from closing when user clicks outside of it or presses Escape key

It is not possible to pinch to zoom when Modal is opened. What should I do?

Use removeScrollProps to configure react-remove-scroll options

What is the difference between searchable Select and Autocomplete?

Searchable Select and Autocomplete are similar components, but they serve different purposes.