Mantine Help Center

45 frequently asked and general questions for Mantine 7.0+

about

Are Mantine components accessible?

Learn about Mantine components accessibility features

How can I contribute to the library?

There are multiple ways to contribute even without writing code

Is there a comparison with other libraries?

Comparison with other libraries is not provided, you are trusted to make your own decision based on documentation examples

Where can I find the roadmap?

The roadmap is private and only available to the team.

Can I use Mantine with Vue/Svelte/Angular/etc.?

No, Mantine is a React library and does not support other frameworks/libraries

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

Can I have color schemes other than light and dark?

Learn about the difference between color scheme and theme

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

Learn how to resolve MantineProvider issues

Why my screen is completely empty after I've added notifications package?

You have used Notifications component incorrectly

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

Why VSCode cannot autoimport Text component?

It is confused by the native Text constructor

styles

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

Learn 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

Why my dates components look broken?

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

Why my notifications are displayed at a wrong position?

Because you did not import styles

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

Why can I not use value/label data structure with Autocomplete/TagsInput?

Learn the difference between Autocomplete and Select components

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 can I focus the first input with error with use-form?

Learn how to handle focus with use-form hook

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

How to scroll to the top of the form if the form is submitted with errors?

Learn how to call a function when the form is submitted with errors

components

Why FileButton does not work in Menu?

Learn how to use FileButton in Menu component

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

Can I use SegmentedControl with empty value?

SegmentedControl cannot be used without a value

What is the difference between searchable Select and Autocomplete?

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

testing

How can I test Select/MultiSelect components?

Learn how to use react-testing-library to test Select and MultiSelect components.