Mantine Help Center

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

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

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

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 Remix?

A guide to load custom fonts in Remix

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

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 body background color?

Use CSS to change body background color

Why my Carousel slides are in vertical orientation?

You forgot to import carousel styles

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

How can I display different elements in light and dark color schemes?

Learn how to hide/show elements based on color scheme

Can I use nested inline styles with Mantine components?

Nested styles are supported only in CSS files

Why my notifications are displayed at a wrong position?

Because you did not import styles

Can I use PostCSS function in inline styles?

Learn where PostCSS functions can be used in Mantine

Can I have different primary color for light and dark color schemes?

Learn how to use virtual color with primary color in theme object

Can I use private CSS variables to style components?

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

My styles are overridden by Mantine components styles, what should I do?

Learn how to use CSS layers to control styles order and prevent Mantine components from overriding your styles

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

My buttons are transparent and the background is visible only on hover, what is wrong?

You have installed a third-party library that overrides Mantine styles

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 to integrate custom input with use-form hook?

Learn how to add use-form support for custom inputs

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

Can I use an array of strings as a list in use-form?

Learn about use-form lists limitations

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

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

Can I remove MultiSelect placeholder when the component has selected values?

Learn why MultiSelect placeholder is not removed when values are selected and how to remove it with CSS

My Popover dropdown closes when I click on the dropdown of nested Popover

Popover dropdown is closed when it detects click outside events

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

Use removeScrollProps to configure react-remove-scroll options

Why I cannot use one polymorphic component in component prop of another polymorphic component?

Learn how polymorphic components types work

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.

How can I test Select/MultiSelect components?

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