Mantine Help Center

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

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

Learn how to resolve MantineProvider issues

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

A guide to load custom fonts in Vite

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

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

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.

How can I test Select/MultiSelect components?

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