# Table of Contents
- [Mantine](#mantine)
- [About Mantine | Mantine](#about-mantine-mantine)
- [Mantine API overview | Mantine](#mantine-api-overview-mantine)
- [Getting started | Mantine](#getting-started-mantine)
- [Usage with Vite | Mantine](#usage-with-vite-mantine)
- [Contributing to Mantine | Mantine](#contributing-to-mantine-mantine)
- [Usage with Remix | Mantine](#usage-with-remix-mantine)
- [Usage with Redwood | Mantine](#usage-with-redwood-mantine)
- [Colors generator | Mantine](#colors-generator-mantine)
- [Usage with Next.js | Mantine](#usage-with-next-js-mantine)
- [Styles API | Mantine](#styles-api-mantine)
- [Usage with Gatsby | Mantine](#usage-with-gatsby-mantine)
- [CSS modules | Mantine](#css-modules-mantine)
- [MantineProvider | Mantine](#mantineprovider-mantine)
- [Polymorphic components | Mantine](#polymorphic-components-mantine)
- [Icons libraries | Mantine](#icons-libraries-mantine)
- [Usage with Storybook | Mantine](#usage-with-storybook-mantine)
- [Theme object | Mantine](#theme-object-mantine)
- [Usage with JavaScript | Mantine](#usage-with-javascript-mantine)
- [CSS variables | Mantine](#css-variables-mantine)
- [PostCSS preset | Mantine](#postcss-preset-mantine)
- [All releases | Mantine](#all-releases-mantine)
- [Color schemes | Mantine](#color-schemes-mantine)
- [Usage with TypeScript | Mantine](#usage-with-typescript-mantine)
- [Testing with Jest | Mantine](#testing-with-jest-mantine)
- [Colors | Mantine](#colors-mantine)
- [Styles overview | Mantine](#styles-overview-mantine)
- [Functions reference | Mantine](#functions-reference-mantine)
- [Testing with Vitest | Mantine](#testing-with-vitest-mantine)
- [6.x to 7.x migration | Mantine](#6-x-to-7-x-migration-mantine)
- [Responsive styles | Mantine](#responsive-styles-mantine)
- [Mantine styles | Mantine](#mantine-styles-mantine)
- [Vanilla extract | Mantine](#vanilla-extract-mantine)
- [Usage with Sass | Mantine](#usage-with-sass-mantine)
- [Default props | Mantine](#default-props-mantine)
- [Global styles | Mantine](#global-styles-mantine)
- [rem, em and px units | Mantine](#rem-em-and-px-units-mantine)
- [CSS files list | Mantine](#css-files-list-mantine)
- [style prop | Mantine](#style-prop-mantine)
- [data-* attributes | Mantine](#data-attributes-mantine)
- [Unstyled / headless | Mantine](#unstyled-headless-mantine)
- [Usage with Emotion | Mantine](#usage-with-emotion-mantine)
- [Button | Mantine](#button-mantine)
---
# Mantine
Build fully functional accessible web applications faster than ever – Mantine includes more than 100 customizable components and 50 hooks to cover you in any situation
Free and open source
All packages have MIT license, you can use Mantine in any project
TypeScript based
Build type safe applications, all components and hooks export types
Use anywhere
Mantine supports all modern frameworks: Next.js, Remix, etc.
[Get started](/getting-started/)
[GitHub](https://github.com/mantinedev/mantine)
Sponsored by
[Metabase](https://www.metabase.com)
[You? ❤️\
\
Sponsor Mantine to get featured here and support the project.](https://opencollective.com/mantinedev)
100+ components
---------------
Inputs
20+ input components
Date pickers
Calendar, date pickers, time inputs
Overlays & Navigation
Modal, HoverCard, Tabs, Stepper
Content
Accordion, Timeline
Rich text editor
Tiptap based rich text editor
Carousel
Embla based carousel
Text input \*
Password input \*
Color input
Native select
ReactAngularSvelteVue
Custom select
Searchable select
Custom multi select
Autocomplete
With description
Every input can have description...
With error
...and error
Dark color scheme
-----------------
Add dark theme to your application with just a few lines of code – Mantine exports global styles both for light and dark theme, all components support dark theme out of the box.
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
);
}
Toggle color scheme
Customize components
--------------------
Every Mantine component supports visual customizations with props – you can quickly prototype and experiment by modifying component props:
New branch
You've created new branch fix-notifications from master
2 hours ago
Commits
You've pushed 23 commits to fix-notifications branch
52 minutes ago
Pull request
You've submitted a pull request Fix incorrect notification message (#187)
34 minutes ago
Code review
Robert Gluesticker left a code review on your pull request
12 minutes ago
Color
Radius
xs
sm
md
lg
xl
Active
Reverse active
Line width
Bullet size
Align
Left
Right
Demo.tsx
import { Timeline } from '@mantine/core';
function Demo() {
return (
{/* items */}
);
}
Expand code
Styles overriding
-----------------
Each Mantine component supports styles overriding for every internal element inside with classes or inline styles. This feature alongside other customization options allows you to implement any visual modifications to components and adapt them to fit almost any design requirements.
Default slider styles
20%
50%
80%
import { Slider } from '@mantine/core';
const marks = [\
{ value: 20, label: '20%' },\
{ value: 50, label: '50%' },\
{ value: 80, label: '80%' },\
];
function Demo() {
return ;
}
Find elements that you need to change in styles API table
| Name | Description |
| --- | --- |
| root | Root element |
| label | Thumb label |
| thumb | Thumb element |
| trackContainer | Wraps track element |
| track | Slider track |
| bar | Track filled part |
| markWrapper | Contains \`mark\` and \`markLabel\` elements |
| mark | Mark displayed on track |
| markLabel | Label of the associated mark, displayed below track |
Then apply styles and add other props:
20%
50%
80%
Demo.module.cssDemo.tsx
.track {
&::before {
background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3));
}
}
.mark {
width: rem(6px);
height: rem(6px);
border-radius: rem(6px);
transform: translateX(rem(-3px)) translateY(rem(-2px));
border-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3));
&[data-filled] {
border-color: var(--mantine-color-blue-6);
}
}
.markLabel {
font-size: var(--mantine-font-size-xs);
margin-bottom: rem(5px);
margin-top: 0;
}
.thumb {
height: rem(16px);
width: rem(16px);
background-color: var(--mantine-color-white);
border-width: rem(1px);
box-shadow: var(--mantine-shadow-sm);
}
Expand code
[View more examples](/styles/styles-api/)
Flexible theming
----------------
Extend default theme with any amount of additional colors, replace shadows, radius, spacing, fonts and many other properties to match your design requirements.
Ocean blue button
Bright pink badge
import { Badge, Button, MantineProvider, createTheme } from '@mantine/core';
const theme = createTheme({
fontFamily: 'Greycliff CF, sans-serif',
colors: {
'ocean-blue': ['#7AD1DD', '#5FCCDB', '#44CADC', '#2AC9DE', '#1AC2D9', '#11B7CD', '#09ADC3', '#0E99AC', '#128797', '#147885'],
'bright-pink': ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
},
});
function Demo() {
return (
Bright pink badge
);
}
Build even faster with Mantine UI
120+ responsive components
built with Mantine
===============================================
Build your next website even faster with premade responsive components designed and built by Mantine maintainers and community. All components are free forever for everyone.
[Explore components](https://ui.mantine.dev/)
[View on GitHub](https://github.com/mantinedev/ui.mantine.dev)
Hooks library
-------------
use-element-size
Subscribe to element size changes
use-debounced-value
Debounce value changes
use-idle
Detect if user does nothing
use-fullscreen
Enter/exit fullscreen
use-move
Slide behavior over any element
use-form
Forms management library
Resize textarea by dragging its right bottom corner
Width: 0, height: 0
Demo.tsx
import { useElementSize } from '@mantine/hooks';
function Demo() {
const { ref, width, height } = useElementSize();
return (
<>
Width: {width}, height: {height}
);
}
Expand code
What people say
---------------
[@sideral](https://github.com/sideral)
[](https://github.com/orgs/mantinedev/discussions/6150 "Open on GitHub")
You nailed it!
Man, I've been doing Front-End for 20 years. This is, hands-down, the best component library I've ever used. What's more, the parts that I didn't like (Styling from JS Objects, slow with big forms) have been addressed in v7. Please keep it up, this library deserves more exposure, it just works and works well and beautifully. Many thanks to [@rtivital](https://github.com/rtivital)
and the contributors!
[@smsuraj100](https://github.com/smsuraj100)
[](https://github.com/orgs/mantinedev/discussions/5783 "Open on GitHub")
One of the best UI libraries I've come across.
I am a senior Frontend Developer and wanted to use something new instead of Material UI and came across this, it has been well thought of all the different scenarios you and come across, and the hooks are just pure love :)
Thank you so much for this.
[@leighton-carr](https://github.com/leighton-carr)
[](https://github.com/orgs/mantinedev/discussions/5504 "Open on GitHub")
Absurdly good
Hope this kind of post is ok - just wanted to say thank you.
I've been writing software professionally for 25 years, with the last 15 in web (mostly internal projects in my company). This is easily the best component library I've ever used.
In every other instance I've run into the boundaries of what the library does and have to spend a lot of time and energy customizing or extending it. Not only does Mantine provide easy access to everything under the hood, but 99% the things you need are provided as default options. I've started to lose count of the "guess I'd better build my standard xyz... oh wait, they have that too" moments. Also the docs are perfect.
Bravo, thank you.
[@Gitgud6969](https://github.com/Gitgud6969)
[](https://github.com/orgs/mantinedev/discussions/3741 "Open on GitHub")
Thank you mantine 💘
Dear Mantine Team, thank you for putting this library together. I have started to use and love Mantine in my free time, and bringing this great library to good use in our company now. All the developers are very pleased with the development experience, the time savings for any bigger project is insane. The amount of flexibility we have with our designers and developers will result in great products. All thanks to every contributor. Continue the good work!
[@SeeSharpCode](https://github.com/SeeSharpCode)
[](https://github.com/orgs/mantinedev/discussions/5456 "Open on GitHub")
A solution for every problem
Mantine has a solution for every problem I’ve needed to solve in my web app. Components and props are named clearly, design choices promote simplicity, and it looks beautiful out of the box. Thank you for jump starting my application in a big way!
[@OmkoBass](https://github.com/OmkoBass)
[](https://github.com/orgs/mantinedev/discussions/259 "Open on GitHub")
Thank you Mantine!
Out of all react component libraries that I have ever seen this one is the most straight forward, easy to use, well documented and really beautiful. I plan on switching and using this full time. Just wanted to say huge thanks to the people that made this.
[@wvha](https://github.com/wvha)
[](https://github.com/orgs/mantinedev/discussions/6219 "Open on GitHub")
Mantine >>>
I started using Mantine for a personal project and it covers so many cases!! Enjoying every part of it so far and can't wait to get more in-depth with it.
[@adamhp](https://github.com/adamhp)
[](https://github.com/orgs/mantinedev/discussions/767 "Open on GitHub")
Insane documentation
I just have to say that the level of documentation, examples, and pure utility this provides is insane. Thanks to all the contributors.
[View more user feedback](https://github.com/orgs/mantinedev/discussions/categories/kind-words)
Ready to get started?
---------------------
Mantine can be used both for SPA and SSR applications. Follow one of the getting started guides to build an application with Mantine using Vite, Next.js, Remix, RedwoodJS or Gatsby:
[Recommended\
\
Vite\
\
Best choice for a single page application (SPA)](/guides/vite/)
[Recommended\
\
Next.js\
\
Best choice for an application with SSR](/guides/next/)
[React Router\
\
Get started with React Router](/guides/react-router/)
[Redwood\
\
Get started with RedwoodJS](/guides/redwood/)
[Gatsby\
\
Get started with Gatsby](/guides/gatsby/)
Join the community
------------------
[Chat on Discord\
\
Join a community of 10,000+ developers to ask questions, share feedback and explore upcoming features](https://discord.gg/wbH82zuWMN)
[Start a discussion\
\
Request new features, ask questions and provide feedback with GitHub discussions](https://github.com/mantinedev/mantine/discussions)
[Help center\
\
Explore 30+ frequently asked questions](https://help.mantine.dev)
[Follow on X\
\
Get notified about new minor and major releases](https://x.com/mantinedev)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# About Mantine | Mantine
About Mantine
=============
Mantine is a React components library focused on providing great user and developer experience. Mantine development was started in January 2021 and the 1.0 version was released on [May 3rd, 2021](https://github.com/mantinedev/mantine/releases/tag/1.0.0)
, and since then, [more than 200 releases have been published](https://github.com/mantinedev/mantine/releases)
.
[Browser support](#browser-support)
------------------------------------
Mantine is tested on real devices in the following browsers before each minor and major release: Chrome, Safari, Firefox, Edge, Safari for iOS, Chrome for Android. Testing in other browsers is not performed.
All Mantine components and hooks were tested to work in the following browsers:
* Chromium browsers 108+ – Chrome, Edge, Chrome for Android, etc.
* Firefox 101+
* Safari 15.4+
* IE (any version) is not supported
Browsers version that support [:where selector](https://caniuse.com/mdn-css_selectors_where)
and [@layer directive](https://caniuse.com/mdn-css_at-rules_layer)
features that are required for Mantine styles (any versions below may have major issues with styles):
* Chromium browsers 99+ – Chrome, Edge, Chrome for Android, etc.
* Firefox 97+
* Safari 15.4+
Mantine components use the following CSS features:
* [:where selector](https://caniuse.com/mdn-css_selectors_where)
in all components
* [@layer directive](https://caniuse.com/mdn-css_at-rules_layer)
in all styles
* [:has pseudo-class](https://caniuse.com/css-has)
in several components for non-critical styles
* [flexbox gap](https://caniuse.com/flexbox-gap)
in most components
* [dvh units](https://caniuse.com/mdn-css_types_length_viewport_percentage_units_dynamic)
in several components
* [color-mix](https://caniuse.com/mdn-css_types_color_color-mix)
function is not used in any components by default, but can be used on your side with [alpha](/styles/postcss-preset/#alpha-function)
PostCSS function.
* [aspect-ratio](https://caniuse.com/mdn-css_properties_aspect-ratio)
CSS property is used in several components
* [container queries](https://caniuse.com/css-container-queries)
are used in several components if the option is explicitly enabled via prop
All CSS features listed above are supported in all modern browsers (90% or more of global usage as of January 2024).
If you need to support older browsers, you should:
* check the component `Browser support` section before usage and decide whether this component will work for your case
* install corresponding polyfills that are required for hook/component to work in older browsers
* check that component works in those browsers on your side (we do not test Mantine in browsers that are older than those that are listed above)
[Releases cycle](#releases-cycle)
----------------------------------
All `@mantine/*` packages follow [semver](https://semver.org/)
:
* Patches (1.0.X) are usually released every one or two weeks
* Minor versions (1.X.0) are usually released on the first Tuesday of each month or once every two months
* Major versions (X.0.0) are released when breaking changes are required, usually a new major version is released once every 6 months/1 year
[Previous versions documentation](#previous-versions-documentation)
--------------------------------------------------------------------
* v1 (1.3.1) – [v1.mantine.dev](https://v1.mantine.dev/)
* v2 (2.5.1) – [v2.mantine.dev](https://v2.mantine.dev/)
* v3 (3.6.14) – [v3.mantine.dev](https://v3.mantine.dev/)
* v4 (4.2.12) – [v4.mantine.dev](https://v4.mantine.dev/)
* v5 (5.10.5) – [v5.mantine.dev](https://v5.mantine.dev/)
* v6 (6.0.21) – [v6.mantine.dev](https://v6.mantine.dev/)
[Project maintenance](#project-maintenance)
--------------------------------------------
Mantine is built and maintained by [Vitaly Rtishchev](https://github.com/rtivital)
and [more than 300 other contributors](https://github.com/mantinedev/mantine/graphs/contributors)
. Most of new features and components/hooks are added to the library based on feedback from the community – you can participate in new features discussions on [GitHub](https://github.com/mantinedev/mantine/discussions)
or [Discord](https://discord.gg/wbH82zuWMN)
.
[Mantine logo](#mantine-logo)
------------------------------
Download Mantine logos in `.svg` format:
[Download svg](data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxNjMgMTYzIj48cGF0aCBmaWxsPSIjMzM5QUYwIiBkPSJNMTYyLjE2MiA4MS41YzAtNDUuMDExLTM2LjMwMS04MS41LTgxLjA4LTgxLjVDMzYuMzAxIDAgMCAzNi40ODkgMCA4MS41IDAgMTI2LjUxIDM2LjMwMSAxNjMgODEuMDgxIDE2M3M4MS4wODEtMzYuNDkgODEuMDgxLTgxLjV6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1Ljk4MyA0My4wNDlhNi4yMzQgNi4yMzQgMCAwMC0uMzM2IDYuODg0IDYuMTQgNi4xNCAwIDAwMS42MTggMS43ODZjOS40NDQgNy4wMzYgMTQuODY2IDE3Ljc5NCAxNC44NjYgMjkuNTIgMCAxMS43MjYtNS40MjIgMjIuNDg0LTE0Ljg2NiAyOS41MmE2LjE0NSA2LjE0NSAwIDAwLTEuNjE2IDEuNzg2IDYuMjEgNi4yMSAwIDAwLS42OTQgNC42OTMgNi4yMSA2LjIxIDAgMDAxLjAyOCAyLjE4NiA2LjE1MSA2LjE1MSAwIDAwNi40NTcgMi4zMTkgNi4xNTQgNi4xNTQgMCAwMDIuMTc3LTEuMDM1IDUwLjA4MyA1MC4wODMgMCAwMDcuOTQ3LTcuMzloMTcuNDkzYzMuNDA2IDAgNi4xNzQtMi43NzIgNi4xNzQtNi4xOTRzLTIuNzYyLTYuMTk0LTYuMTc0LTYuMTk0aC05LjY1NWE0OS4xNjUgNDkuMTY1IDAgMDA0LjA3MS0xOS42OSA0OS4xNjcgNDkuMTY3IDAgMDAtNC4wNy0xOS42OTJoOS42NmMzLjQwNiAwIDYuMTczLTIuNzcxIDYuMTczLTYuMTk0IDAtMy40MjItMi43NjItNi4xOTMtNi4xNzMtNi4xOTNIODIuNTc0YTUwLjExMiA1MC4xMTIgMCAwMC03Ljk1Mi03LjM5NyA2LjE1IDYuMTUgMCAwMC00LjU3OC0xLjE1MyA2LjE4OSA2LjE4OSAwIDAwLTQuMDU1IDIuNDM4aC0uMDA2eiIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTU2LjIzNiA3OS4zOTFhOS4zNDIgOS4zNDIgMCAwMS42MzItMy42MDggOS4yNjIgOS4yNjIgMCAwMTEuOTY3LTMuMDc3IDkuMTQzIDkuMTQzIDAgMDEyLjk5NC0yLjA2MyA5LjA2IDkuMDYgMCAwMTcuMTAzIDAgOS4xNDUgOS4xNDUgMCAwMTIuOTk1IDIuMDYzIDkuMjYyIDkuMjYyIDAgMDExLjk2NyAzLjA3NyA5LjMzOSA5LjMzOSAwIDAxLTIuMTI1IDEwLjAwMyA5LjA5NCA5LjA5NCAwIDAxLTYuMzg4IDIuNjMgOS4wOTQgOS4wOTQgMCAwMS02LjM5LTIuNjMgOS4zIDkuMyAwIDAxLTIuNzU1LTYuMzk1eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+)
Copy svg code
[Download svg](data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA2MjMgMTYzIj48cGF0aCBmaWxsPSIjMzM5QUYwIiBkPSJNMTYyLjE2MiA4MS41YzAtNDUuMDExLTM2LjMwMS04MS41LTgxLjA4LTgxLjVDMzYuMzAxIDAgMCAzNi40ODkgMCA4MS41IDAgMTI2LjUxIDM2LjMwMSAxNjMgODEuMDgxIDE2M3M4MS4wODEtMzYuNDkgODEuMDgxLTgxLjV6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1Ljk4MyA0My4wNDlhNi4yMzQgNi4yMzQgMCAwMC0uMzM2IDYuODg0IDYuMTQgNi4xNCAwIDAwMS42MTggMS43ODZjOS40NDQgNy4wMzYgMTQuODY2IDE3Ljc5NCAxNC44NjYgMjkuNTIgMCAxMS43MjYtNS40MjIgMjIuNDg0LTE0Ljg2NiAyOS41MmE2LjE0NSA2LjE0NSAwIDAwLTEuNjE2IDEuNzg2IDYuMjEgNi4yMSAwIDAwLS42OTQgNC42OTMgNi4yMSA2LjIxIDAgMDAxLjAyOCAyLjE4NiA2LjE1MSA2LjE1MSAwIDAwNi40NTcgMi4zMTkgNi4xNTQgNi4xNTQgMCAwMDIuMTc3LTEuMDM1IDUwLjA4MyA1MC4wODMgMCAwMDcuOTQ3LTcuMzloMTcuNDkzYzMuNDA2IDAgNi4xNzQtMi43NzIgNi4xNzQtNi4xOTRzLTIuNzYyLTYuMTk0LTYuMTc0LTYuMTk0aC05LjY1NWE0OS4xNjUgNDkuMTY1IDAgMDA0LjA3MS0xOS42OSA0OS4xNjcgNDkuMTY3IDAgMDAtNC4wNy0xOS42OTJoOS42NmMzLjQwNiAwIDYuMTczLTIuNzcxIDYuMTczLTYuMTk0IDAtMy40MjItMi43NjItNi4xOTMtNi4xNzMtNi4xOTNIODIuNTc0YTUwLjExMiA1MC4xMTIgMCAwMC03Ljk1Mi03LjM5NyA2LjE1IDYuMTUgMCAwMC00LjU3OC0xLjE1MyA2LjE4OSA2LjE4OSAwIDAwLTQuMDU1IDIuNDM4aC0uMDA2eiIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTU2LjIzNiA3OS4zOTFhOS4zNDIgOS4zNDIgMCAwMS42MzItMy42MDggOS4yNjIgOS4yNjIgMCAwMTEuOTY3LTMuMDc3IDkuMTQzIDkuMTQzIDAgMDEyLjk5NC0yLjA2MyA5LjA2IDkuMDYgMCAwMTcuMTAzIDAgOS4xNDUgOS4xNDUgMCAwMTIuOTk1IDIuMDYzIDkuMjYyIDkuMjYyIDAgMDExLjk2NyAzLjA3NyA5LjMzOSA5LjMzOSAwIDAxLTIuMTI1IDEwLjAwMyA5LjA5NCA5LjA5NCAwIDAxLTYuMzg4IDIuNjMgOS4wOTQgOS4wOTQgMCAwMS02LjM5LTIuNjMgOS4zIDkuMyAwIDAxLTIuNzU1LTYuMzk1eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTI5MS43MzYgMTI2LjY0NGMxLjk4NCAwIDMuODIzLS40MzQgNS41MTgtMS4zMDIgMS42OTUtLjg2OCAyLjU0Mi0yLjEyOSAyLjU0Mi0zLjc4MnYtNzcuNWMwLTIuOTc2LS44MjctNS4wNjMtMi40OC02LjI2Mi0xLjY1My0xLjE5OS0zLjUxMy0xLjc5OC01LjU4LTEuNzk4LTEuOTAxIDAtMy41NTUuMjA3LTQuOTYuNjItMS40MDUuNDEzLTIuNjY2IDEuMjQtMy43ODIgMi40OHMtMi40MTggMy4wNTktMy45MDYgNS40NTZsLTE1LjI1MiAyNy43NzYtMTUuMTI4LTI3Ljc3NmMtMS4zMjMtMi4zOTctMi41ODMtNC4yMTYtMy43ODItNS40NTYtMS4xOTktMS4yNC0yLjQ4LTIuMDY3LTMuODQ0LTIuNDgtMS4zNjQtLjQxMy0zLjAzOC0uNjItNS4wMjItLjYyLTEuOTg0IDAtMy44MjMuNi01LjUxOCAxLjc5OC0xLjY5NSAxLjE5OS0yLjU0MiAzLjI4Ni0yLjU0MiA2LjI2MnY3Ny41YzAgMS42NTMuODQ3IDIuOTE0IDIuNTQyIDMuNzgyIDEuNjk1Ljg2OCAzLjUzNCAxLjMwMiA1LjUxOCAxLjMwMiAyLjA2NyAwIDMuOTI3LS40MzQgNS41OC0xLjMwMiAxLjY1My0uODY4IDIuNDgtMi4xMjkgMi40OC0zLjc4MlY2Ny4yNDhsMTQuMjYgMjYuNzg0Yy43NDQgMS4yNCAxLjU5MSAyLjA4NyAyLjU0MiAyLjU0Mi45NS40NTUgMS44OC42ODIgMi43OS42ODIuOTkyIDAgMS45ODQtLjI0OCAyLjk3Ni0uNzQ0czEuODYtMS4zMjMgMi42MDQtMi40OGwxNC4zODQtMjUuNzkydjUzLjMyYzAgMS42NTMuODQ3IDIuOTE0IDIuNTQyIDMuNzgyIDEuNjk1Ljg2OCAzLjUzNCAxLjMwMiA1LjUxOCAxLjMwMnptMzQuMzc1IDEuMTE2YzQuMjk4IDAgNy45NTYtLjk5MiAxMC45NzQtMi45NzYgMy4wMTctMS45ODQgNS42NDItNC4yNTcgNy44NzQtNi44MnYzLjU5NmMwIDEuNDA1LjY4MiAyLjYwNCAyLjA0NiAzLjU5NiAxLjM2NC45OTIgMy4wOCAxLjQ4OCA1LjE0NiAxLjQ4OCAyLjIzMiAwIDQuMDkyLS40OTYgNS41OC0xLjQ4OCAxLjQ4OC0uOTkyIDIuMjMyLTIuMTkgMi4yMzItMy41OTZWOTEuMThjMC00LjIxNi0uODg5LTguMTQzLTIuNjY2LTExLjc4LTEuNzc4LTMuNjM3LTQuNjA5LTYuNjEzLTguNDk0LTguOTI4LTMuODg2LTIuMzE1LTkuMDUyLTMuNDcyLTE1LjUtMy40NzItMi44OTQgMC01Ljg3LjM3Mi04LjkyOCAxLjExNi0zLjA1OS43NDQtNS42NDIgMS43OTgtNy43NSAzLjE2Mi0yLjEwOCAxLjM2NC0zLjE2MiAyLjkxNC0zLjE2MiA0LjY1IDAgMS44MTkuNDc1IDMuNTk2IDEuNDI2IDUuMzMyLjk1IDEuNzM2IDIuMjk0IDIuNjA0IDQuMDMgMi42MDQgMS4wNzQgMCAyLjA2Ni0uMzMgMi45NzYtLjk5Mi45MS0uNjYxIDIuMjExLTEuMzAyIDMuOTA2LTEuOTIyIDEuNjk0LS42MiA0LjExMi0uOTMgNy4yNTQtLjkzIDIuODEgMCA0Ljk4LjU3OSA2LjUxIDEuNzM2IDEuNTMgMS4xNTcgMi42NDUgMi42MDQgMy4zNDggNC4zNGExNC4wOTIgMTQuMDkyIDAgMDExLjA1NCA1LjMzMnYxLjYxMmgtNS4wODRjLTUuNzA0IDAtMTAuNzI2LjUzNy0xNS4wNjYgMS42MTItNC4zNCAxLjA3NS03LjczIDIuOTM1LTEwLjE2OCA1LjU4LTIuNDM5IDIuNjQ1LTMuNjU4IDYuMzI0LTMuNjU4IDExLjAzNiAwIDUuNjIxIDEuNTkxIDkuNzc1IDQuNzc0IDEyLjQ2MiAzLjE4MiAyLjY4NyA2Ljk2NCA0LjAzIDExLjM0NiA0LjAzem02LjQ0OC0xMS45MDRjLTEuODE5IDAtMy4zNjktLjUzNy00LjY1LTEuNjEyLTEuMjgyLTEuMDc1LTEuOTIyLTIuNzctMS45MjItNS4wODQgMC0yLjMxNS43NjQtNC4wMyAyLjI5NC01LjE0NiAxLjUzLTEuMTE2IDMuNTM0LTEuODQgNi4wMTQtMi4xN2E1OS4yMyA1OS4yMyAwIDAxNy44MTItLjQ5NmgxLjg2djIuNjA0YzAgMS45ODQtLjYgMy44ODUtMS43OTggNS43MDQtMS4xOTkgMS44MTktMi42NjYgMy4zMDctNC40MDIgNC40NjQtMS43MzYgMS4xNTctMy40NzIgMS43MzYtNS4yMDggMS43MzZ6bTg0LjE2OSAxMC43ODhjMi4wNjcgMCAzLjkyNy0uNDM0IDUuNTgtMS4zMDIgMS42NTMtLjg2OCAyLjQ4LTIuMTI5IDIuNDgtMy43ODJWOTIuMTcyYzAtNC42My0uOTcxLTguODQ1LTIuOTE0LTEyLjY0OC0xLjk0My0zLjgwMy00LjUyNi02Ljg0LTcuNzUtOS4xMTRDNDEwLjkgNjguMTM3IDQwNy4zNDUgNjcgNDAzLjQ2IDY3Yy00LjEzMyAwLTcuNjI2Ljk3MS0xMC40NzggMi45MTQtMi44NTIgMS45NDMtNC44OTggNC4xMTMtNi4xMzggNi41MXYtMy43MmMwLTEuNDg4LS42ODItMi42ODctMi4wNDYtMy41OTYtMS4zNjQtLjkxLTMuMDM4LTEuMzY0LTUuMDIyLTEuMzY0LTIuMzE1IDAtNC4yMTYuNDU1LTUuNzA0IDEuMzY0LTEuNDg4LjkxLTIuMjMyIDIuMTA4LTIuMjMyIDMuNTk2djQ4Ljg1NmMwIDEuMjQuNzQ0IDIuMzk3IDIuMjMyIDMuNDcyIDEuNDg4IDEuMDc1IDMuMzkgMS42MTIgNS43MDQgMS42MTIgMi4yMzIgMCA0LjEzMy0uNTM3IDUuNzA0LTEuNjEyIDEuNTctMS4wNzUgMi4zNTYtMi4yMzIgMi4zNTYtMy40NzJWOTIuMTcyYzAtMi4zMTUuNDk2LTQuMjk5IDEuNDg4LTUuOTUyLjk5Mi0xLjY1MyAyLjI3My0yLjkzNSAzLjg0NC0zLjg0NCAxLjU3LS45MSAzLjE4My0xLjM2NCA0LjgzNi0xLjM2NCAxLjk4NCAwIDMuODAzLjU1OCA1LjQ1NiAxLjY3NCAxLjY1MyAxLjExNiAyLjk1NSAyLjUgMy45MDYgNC4xNTRhMTAuNTIgMTAuNTIgMCAwMTEuNDI2IDUuMzMydjI5LjM4OGMwIDEuNjUzLjg2OCAyLjkxNCAyLjYwNCAzLjc4MiAxLjczNi44NjggMy41MTMgMS4zMDIgNS4zMzIgMS4zMDJ6bTQ3LjQzMiAwYzIuMzE1IDAgNC4wMy0uNzAzIDUuMTQ2LTIuMTA4IDEuMTE2LTEuNDA1IDEuNjc0LTIuOTc2IDEuNjc0LTQuNzEyIDAtMS42NTMtLjU1OC0zLjE4My0xLjY3NC00LjU4OC0xLjExNi0xLjQwNS0yLjgzMS0yLjEwOC01LjE0Ni0yLjEwOGgtNC44MzZjLTIuNTYzIDAtNC4zNi0uNDk2LTUuMzk0LTEuNDg4LTEuMDMzLS45OTItMS41NS0yLjY4Ny0xLjU1LTUuMDg0Vjc5LjRoMTQuNjMyYzEuMzIzIDAgMi4zMzUtLjYgMy4wMzgtMS43OTguNzAzLTEuMTk5IDEuMDU0LTIuNTQyIDEuMDU0LTQuMDMgMC0xLjQ4OC0uMzUxLTIuODMxLTEuMDU0LTQuMDMtLjcwMy0xLjE5OS0xLjcxNS0xLjc5OC0zLjAzOC0xLjc5OEg0NTIuMzhWNDYuNDE2YzAtMS40ODgtLjg0Ny0yLjY4Ny0yLjU0Mi0zLjU5Ni0xLjY5NS0uOTEtMy41MzQtMS4zNjQtNS41MTgtMS4zNjQtMS44MTkgMC0zLjU5Ni40NTUtNS4zMzIgMS4zNjQtMS43MzYuOTEtMi42MDQgMi4xMDgtMi42MDQgMy41OTZ2NjAuMTRjMCA2Ljk0NCAxLjk2MyAxMi4wMjggNS44OSAxNS4yNTIgMy45MjcgMy4yMjQgOS42MSA0LjgzNiAxNy4wNSA0LjgzNmg0LjgzNnpNNDg3LjIzMiA1NC42YzIuMzk3IDAgNC40NDMtLjgwNiA2LjEzOC0yLjQxOCAxLjY5NS0xLjYxMiAyLjU0Mi0zLjQxIDIuNTQyLTUuMzk0IDAtMi4xNS0uODQ3LTMuOTg5LTIuNTQyLTUuNTE4LTEuNjk1LTEuNTMtMy43NC0yLjI5NC02LjEzOC0yLjI5NC0yLjM5NyAwLTQuNDY0Ljc2NS02LjIgMi4yOTQtMS43MzYgMS41My0yLjYwNCAzLjM2OS0yLjYwNCA1LjUxOCAwIDEuOTg0Ljg2OCAzLjc4MiAyLjYwNCA1LjM5NCAxLjczNiAxLjYxMiAzLjgwMyAyLjQxOCA2LjIgMi40MTh6bTAgNzIuMDQ0YzIuMjMyIDAgNC4xMzMtLjUzNyA1LjcwNC0xLjYxMiAxLjU3LTEuMDc1IDIuMzU2LTIuMjMyIDIuMzU2LTMuNDcyVjcyLjcwNGMwLTEuNDg4LS43ODUtMi42ODctMi4zNTYtMy41OTYtMS41Ny0uOTEtMy40NzItMS4zNjQtNS43MDQtMS4zNjQtMi4zMTUgMC00LjIxNi40NTUtNS43MDQgMS4zNjQtMS40ODguOTEtMi4yMzIgMi4xMDgtMi4yMzIgMy41OTZ2NDguODU2YzAgMS4yNC43NDQgMi4zOTcgMi4yMzIgMy40NzIgMS40ODggMS4wNzUgMy4zOSAxLjYxMiA1LjcwNCAxLjYxMnptNjUuMjQ3IDBjMi4wNjYgMCAzLjkyNi0uNDM0IDUuNTgtMS4zMDIgMS42NTMtLjg2OCAyLjQ4LTIuMTI5IDIuNDgtMy43ODJWOTIuMTcyYzAtNC42My0uOTcyLTguODQ1LTIuOTE0LTEyLjY0OC0xLjk0My0zLjgwMy00LjUyNi02Ljg0LTcuNzUtOS4xMTQtMy4yMjQtMi4yNzMtNi43NzktMy40MS0xMC42NjQtMy40MS00LjEzNCAwLTcuNjI2Ljk3MS0xMC40NzggMi45MTQtMi44NTIgMS45NDMtNC44OTggNC4xMTMtNi4xMzggNi41MXYtMy43MmMwLTEuNDg4LS42ODItMi42ODctMi4wNDYtMy41OTYtMS4zNjQtLjkxLTMuMDM4LTEuMzY0LTUuMDIyLTEuMzY0LTIuMzE1IDAtNC4yMTYuNDU1LTUuNzA0IDEuMzY0LTEuNDg4LjkxLTIuMjMyIDIuMTA4LTIuMjMyIDMuNTk2djQ4Ljg1NmMwIDEuMjQuNzQ0IDIuMzk3IDIuMjMyIDMuNDcyIDEuNDg4IDEuMDc1IDMuMzkgMS42MTIgNS43MDQgMS42MTIgMi4yMzIgMCA0LjEzMy0uNTM3IDUuNzA0LTEuNjEyIDEuNTctMS4wNzUgMi4zNTYtMi4yMzIgMi4zNTYtMy40NzJWOTIuMTcyYzAtMi4zMTUuNDk2LTQuMjk5IDEuNDg4LTUuOTUyLjk5Mi0xLjY1MyAyLjI3My0yLjkzNSAzLjg0NC0zLjg0NCAxLjU3LS45MSAzLjE4Mi0xLjM2NCA0LjgzNi0xLjM2NCAxLjk4NCAwIDMuODAyLjU1OCA1LjQ1NiAxLjY3NCAxLjY1MyAxLjExNiAyLjk1NSAyLjUgMy45MDYgNC4xNTRhMTAuNTIgMTAuNTIgMCAwMTEuNDI2IDUuMzMydjI5LjM4OGMwIDEuNjUzLjg2OCAyLjkxNCAyLjYwNCAzLjc4MiAxLjczNi44NjggMy41MTMgMS4zMDIgNS4zMzIgMS4zMDJ6bTQ3LjY4IDEuMTE2YzQuNDY0IDAgOC4zMjgtLjU1OCAxMS41OTQtMS42NzQgMy4yNjUtMS4xMTYgNS43ODYtMi40OCA3LjU2NC00LjA5MiAxLjc3Ny0xLjYxMiAyLjY2Ni0zLjEyIDIuNjY2LTQuNTI2IDAtLjgyNy0uMjQ4LTEuNzk4LS43NDQtMi45MTRhOC42NDUgOC42NDUgMCAwMC0yLjEwOC0yLjkxNGMtLjkxLS44MjctMS45ODQtMS4yNC0zLjIyNC0xLjI0LTEuMTU4IDAtMi4zOTguMzcyLTMuNzIgMS4xMTYtMS4zMjMuNzQ0LTIuODk0IDEuNTMtNC43MTIgMi4zNTYtMS44MTkuODI3LTQuMDkyIDEuMjQtNi44MiAxLjI0LTQuMjk5IDAtNy43OTItMS4wOTUtMTAuNDc4LTMuMjg2LTIuNjg3LTIuMTktNC4wMy01LjA2My00LjAzLTguNjE4di0xLjg2aDI1LjE3MmMxLjkwMSAwIDMuNzQtLjE4NiA1LjUxOC0uNTU4IDEuNzc3LS4zNzIgMy4yNDQtMS4zMjMgNC40MDItMi44NTIgMS4xNTctMS41MyAxLjczNi00LjA3MSAxLjczNi03LjYyNiAwLTQuNjMtMS4xOTktOC42OC0zLjU5Ni0xMi4xNTItMi4zOTgtMy40NzItNS41MTgtNi4yLTkuMzYyLTguMTg0LTMuODQ0LTEuOTg0LTguMDgtMi45NzYtMTIuNzEtMi45NzYtNS4wNDMgMC05LjYxIDEuMTM3LTEzLjcwMiAzLjQxLTQuMDkyIDIuMjczLTcuMzU4IDUuMjktOS43OTYgOS4wNTItMi40MzkgMy43NjEtMy42NTggNy44NzQtMy42NTggMTIuMzM4djEwLjU0YzAgNS4wNDMgMS4yODEgOS40ODYgMy44NDQgMTMuMzMgMi41NjIgMy44NDQgNi4wOTYgNi44MiAxMC42MDIgOC45MjggNC41MDUgMi4xMDggOS42OTIgMy4xNjIgMTUuNTYyIDMuMTYyem00LjA5Mi0zNS44MzZoLTE4LjEwNHYtMy40NzJjMC0xLjk4NC41MTYtMy43IDEuNTUtNS4xNDYgMS4wMzMtMS40NDcgMi4zNzYtMi41NjMgNC4wMy0zLjM0OCAxLjY1My0uNzg1IDMuNDMtMS4xNzggNS4zMzItMS4xNzggMS45ODQgMCAzLjgwMi40MTMgNS40NTYgMS4yNCAxLjY1My44MjcgMi45NzYgMS45ODQgMy45NjggMy40NzJzMS40ODggMy4xODMgMS40ODggNS4wODRjMCAxLjMyMy0uMjY5IDIuMjExLS44MDYgMi42NjYtLjUzOC40NTUtMS41MDkuNjgyLTIuOTE0LjY4MnoiLz48L3N2Zz4=)
Copy svg code
[Download svg](data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA2MjMgMTYzIj48cGF0aCBmaWxsPSIjMzM5QUYwIiBkPSJNMTYyLjE2MiA4MS41YzAtNDUuMDExLTM2LjMwMS04MS41LTgxLjA4LTgxLjVDMzYuMzAxIDAgMCAzNi40ODkgMCA4MS41IDAgMTI2LjUxIDM2LjMwMSAxNjMgODEuMDgxIDE2M3M4MS4wODEtMzYuNDkgODEuMDgxLTgxLjV6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1Ljk4MyA0My4wNDlhNi4yMzQgNi4yMzQgMCAwMC0uMzM2IDYuODg0IDYuMTQgNi4xNCAwIDAwMS42MTggMS43ODZjOS40NDQgNy4wMzYgMTQuODY2IDE3Ljc5NCAxNC44NjYgMjkuNTIgMCAxMS43MjYtNS40MjIgMjIuNDg0LTE0Ljg2NiAyOS41MmE2LjE0NSA2LjE0NSAwIDAwLTEuNjE2IDEuNzg2IDYuMjEgNi4yMSAwIDAwLS42OTQgNC42OTMgNi4yMSA2LjIxIDAgMDAxLjAyOCAyLjE4NiA2LjE1MSA2LjE1MSAwIDAwNi40NTcgMi4zMTkgNi4xNTQgNi4xNTQgMCAwMDIuMTc3LTEuMDM1IDUwLjA4MyA1MC4wODMgMCAwMDcuOTQ3LTcuMzloMTcuNDkzYzMuNDA2IDAgNi4xNzQtMi43NzIgNi4xNzQtNi4xOTRzLTIuNzYyLTYuMTk0LTYuMTc0LTYuMTk0aC05LjY1NWE0OS4xNjUgNDkuMTY1IDAgMDA0LjA3MS0xOS42OSA0OS4xNjcgNDkuMTY3IDAgMDAtNC4wNy0xOS42OTJoOS42NmMzLjQwNiAwIDYuMTczLTIuNzcxIDYuMTczLTYuMTk0IDAtMy40MjItMi43NjItNi4xOTMtNi4xNzMtNi4xOTNIODIuNTc0YTUwLjExMiA1MC4xMTIgMCAwMC03Ljk1Mi03LjM5NyA2LjE1IDYuMTUgMCAwMC00LjU3OC0xLjE1MyA2LjE4OSA2LjE4OSAwIDAwLTQuMDU1IDIuNDM4aC0uMDA2eiIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTU2LjIzNiA3OS4zOTFhOS4zNDIgOS4zNDIgMCAwMS42MzItMy42MDggOS4yNjIgOS4yNjIgMCAwMTEuOTY3LTMuMDc3IDkuMTQzIDkuMTQzIDAgMDEyLjk5NC0yLjA2MyA5LjA2IDkuMDYgMCAwMTcuMTAzIDAgOS4xNDUgOS4xNDUgMCAwMTIuOTk1IDIuMDYzIDkuMjYyIDkuMjYyIDAgMDExLjk2NyAzLjA3NyA5LjMzOSA5LjMzOSAwIDAxLTIuMTI1IDEwLjAwMyA5LjA5NCA5LjA5NCAwIDAxLTYuMzg4IDIuNjMgOS4wOTQgOS4wOTQgMCAwMS02LjM5LTIuNjMgOS4zIDkuMyAwIDAxLTIuNzU1LTYuMzk1eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTI5MS43MzYgMTI2LjY0NGMxLjk4NCAwIDMuODIzLS40MzQgNS41MTgtMS4zMDIgMS42OTUtLjg2OCAyLjU0Mi0yLjEyOSAyLjU0Mi0zLjc4MnYtNzcuNWMwLTIuOTc2LS44MjctNS4wNjMtMi40OC02LjI2Mi0xLjY1My0xLjE5OS0zLjUxMy0xLjc5OC01LjU4LTEuNzk4LTEuOTAxIDAtMy41NTUuMjA3LTQuOTYuNjItMS40MDUuNDEzLTIuNjY2IDEuMjQtMy43ODIgMi40OHMtMi40MTggMy4wNTktMy45MDYgNS40NTZsLTE1LjI1MiAyNy43NzYtMTUuMTI4LTI3Ljc3NmMtMS4zMjMtMi4zOTctMi41ODMtNC4yMTYtMy43ODItNS40NTYtMS4xOTktMS4yNC0yLjQ4LTIuMDY3LTMuODQ0LTIuNDgtMS4zNjQtLjQxMy0zLjAzOC0uNjItNS4wMjItLjYyLTEuOTg0IDAtMy44MjMuNi01LjUxOCAxLjc5OC0xLjY5NSAxLjE5OS0yLjU0MiAzLjI4Ni0yLjU0MiA2LjI2MnY3Ny41YzAgMS42NTMuODQ3IDIuOTE0IDIuNTQyIDMuNzgyIDEuNjk1Ljg2OCAzLjUzNCAxLjMwMiA1LjUxOCAxLjMwMiAyLjA2NyAwIDMuOTI3LS40MzQgNS41OC0xLjMwMiAxLjY1My0uODY4IDIuNDgtMi4xMjkgMi40OC0zLjc4MlY2Ny4yNDhsMTQuMjYgMjYuNzg0Yy43NDQgMS4yNCAxLjU5MSAyLjA4NyAyLjU0MiAyLjU0Mi45NS40NTUgMS44OC42ODIgMi43OS42ODIuOTkyIDAgMS45ODQtLjI0OCAyLjk3Ni0uNzQ0czEuODYtMS4zMjMgMi42MDQtMi40OGwxNC4zODQtMjUuNzkydjUzLjMyYzAgMS42NTMuODQ3IDIuOTE0IDIuNTQyIDMuNzgyIDEuNjk1Ljg2OCAzLjUzNCAxLjMwMiA1LjUxOCAxLjMwMnptMzQuMzc1IDEuMTE2YzQuMjk4IDAgNy45NTYtLjk5MiAxMC45NzQtMi45NzYgMy4wMTctMS45ODQgNS42NDItNC4yNTcgNy44NzQtNi44MnYzLjU5NmMwIDEuNDA1LjY4MiAyLjYwNCAyLjA0NiAzLjU5NiAxLjM2NC45OTIgMy4wOCAxLjQ4OCA1LjE0NiAxLjQ4OCAyLjIzMiAwIDQuMDkyLS40OTYgNS41OC0xLjQ4OCAxLjQ4OC0uOTkyIDIuMjMyLTIuMTkgMi4yMzItMy41OTZWOTEuMThjMC00LjIxNi0uODg5LTguMTQzLTIuNjY2LTExLjc4LTEuNzc4LTMuNjM3LTQuNjA5LTYuNjEzLTguNDk0LTguOTI4LTMuODg2LTIuMzE1LTkuMDUyLTMuNDcyLTE1LjUtMy40NzItMi44OTQgMC01Ljg3LjM3Mi04LjkyOCAxLjExNi0zLjA1OS43NDQtNS42NDIgMS43OTgtNy43NSAzLjE2Mi0yLjEwOCAxLjM2NC0zLjE2MiAyLjkxNC0zLjE2MiA0LjY1IDAgMS44MTkuNDc1IDMuNTk2IDEuNDI2IDUuMzMyLjk1IDEuNzM2IDIuMjk0IDIuNjA0IDQuMDMgMi42MDQgMS4wNzQgMCAyLjA2Ni0uMzMgMi45NzYtLjk5Mi45MS0uNjYxIDIuMjExLTEuMzAyIDMuOTA2LTEuOTIyIDEuNjk0LS42MiA0LjExMi0uOTMgNy4yNTQtLjkzIDIuODEgMCA0Ljk4LjU3OSA2LjUxIDEuNzM2IDEuNTMgMS4xNTcgMi42NDUgMi42MDQgMy4zNDggNC4zNGExNC4wOTIgMTQuMDkyIDAgMDExLjA1NCA1LjMzMnYxLjYxMmgtNS4wODRjLTUuNzA0IDAtMTAuNzI2LjUzNy0xNS4wNjYgMS42MTItNC4zNCAxLjA3NS03LjczIDIuOTM1LTEwLjE2OCA1LjU4LTIuNDM5IDIuNjQ1LTMuNjU4IDYuMzI0LTMuNjU4IDExLjAzNiAwIDUuNjIxIDEuNTkxIDkuNzc1IDQuNzc0IDEyLjQ2MiAzLjE4MiAyLjY4NyA2Ljk2NCA0LjAzIDExLjM0NiA0LjAzem02LjQ0OC0xMS45MDRjLTEuODE5IDAtMy4zNjktLjUzNy00LjY1LTEuNjEyLTEuMjgyLTEuMDc1LTEuOTIyLTIuNzctMS45MjItNS4wODQgMC0yLjMxNS43NjQtNC4wMyAyLjI5NC01LjE0NiAxLjUzLTEuMTE2IDMuNTM0LTEuODQgNi4wMTQtMi4xN2E1OS4yMyA1OS4yMyAwIDAxNy44MTItLjQ5NmgxLjg2djIuNjA0YzAgMS45ODQtLjYgMy44ODUtMS43OTggNS43MDQtMS4xOTkgMS44MTktMi42NjYgMy4zMDctNC40MDIgNC40NjQtMS43MzYgMS4xNTctMy40NzIgMS43MzYtNS4yMDggMS43MzZ6bTg0LjE2OSAxMC43ODhjMi4wNjcgMCAzLjkyNy0uNDM0IDUuNTgtMS4zMDIgMS42NTMtLjg2OCAyLjQ4LTIuMTI5IDIuNDgtMy43ODJWOTIuMTcyYzAtNC42My0uOTcxLTguODQ1LTIuOTE0LTEyLjY0OC0xLjk0My0zLjgwMy00LjUyNi02Ljg0LTcuNzUtOS4xMTRDNDEwLjkgNjguMTM3IDQwNy4zNDUgNjcgNDAzLjQ2IDY3Yy00LjEzMyAwLTcuNjI2Ljk3MS0xMC40NzggMi45MTQtMi44NTIgMS45NDMtNC44OTggNC4xMTMtNi4xMzggNi41MXYtMy43MmMwLTEuNDg4LS42ODItMi42ODctMi4wNDYtMy41OTYtMS4zNjQtLjkxLTMuMDM4LTEuMzY0LTUuMDIyLTEuMzY0LTIuMzE1IDAtNC4yMTYuNDU1LTUuNzA0IDEuMzY0LTEuNDg4LjkxLTIuMjMyIDIuMTA4LTIuMjMyIDMuNTk2djQ4Ljg1NmMwIDEuMjQuNzQ0IDIuMzk3IDIuMjMyIDMuNDcyIDEuNDg4IDEuMDc1IDMuMzkgMS42MTIgNS43MDQgMS42MTIgMi4yMzIgMCA0LjEzMy0uNTM3IDUuNzA0LTEuNjEyIDEuNTctMS4wNzUgMi4zNTYtMi4yMzIgMi4zNTYtMy40NzJWOTIuMTcyYzAtMi4zMTUuNDk2LTQuMjk5IDEuNDg4LTUuOTUyLjk5Mi0xLjY1MyAyLjI3My0yLjkzNSAzLjg0NC0zLjg0NCAxLjU3LS45MSAzLjE4My0xLjM2NCA0LjgzNi0xLjM2NCAxLjk4NCAwIDMuODAzLjU1OCA1LjQ1NiAxLjY3NCAxLjY1MyAxLjExNiAyLjk1NSAyLjUgMy45MDYgNC4xNTRhMTAuNTIgMTAuNTIgMCAwMTEuNDI2IDUuMzMydjI5LjM4OGMwIDEuNjUzLjg2OCAyLjkxNCAyLjYwNCAzLjc4MiAxLjczNi44NjggMy41MTMgMS4zMDIgNS4zMzIgMS4zMDJ6bTQ3LjQzMiAwYzIuMzE1IDAgNC4wMy0uNzAzIDUuMTQ2LTIuMTA4IDEuMTE2LTEuNDA1IDEuNjc0LTIuOTc2IDEuNjc0LTQuNzEyIDAtMS42NTMtLjU1OC0zLjE4My0xLjY3NC00LjU4OC0xLjExNi0xLjQwNS0yLjgzMS0yLjEwOC01LjE0Ni0yLjEwOGgtNC44MzZjLTIuNTYzIDAtNC4zNi0uNDk2LTUuMzk0LTEuNDg4LTEuMDMzLS45OTItMS41NS0yLjY4Ny0xLjU1LTUuMDg0Vjc5LjRoMTQuNjMyYzEuMzIzIDAgMi4zMzUtLjYgMy4wMzgtMS43OTguNzAzLTEuMTk5IDEuMDU0LTIuNTQyIDEuMDU0LTQuMDMgMC0xLjQ4OC0uMzUxLTIuODMxLTEuMDU0LTQuMDMtLjcwMy0xLjE5OS0xLjcxNS0xLjc5OC0zLjAzOC0xLjc5OEg0NTIuMzhWNDYuNDE2YzAtMS40ODgtLjg0Ny0yLjY4Ny0yLjU0Mi0zLjU5Ni0xLjY5NS0uOTEtMy41MzQtMS4zNjQtNS41MTgtMS4zNjQtMS44MTkgMC0zLjU5Ni40NTUtNS4zMzIgMS4zNjQtMS43MzYuOTEtMi42MDQgMi4xMDgtMi42MDQgMy41OTZ2NjAuMTRjMCA2Ljk0NCAxLjk2MyAxMi4wMjggNS44OSAxNS4yNTIgMy45MjcgMy4yMjQgOS42MSA0LjgzNiAxNy4wNSA0LjgzNmg0LjgzNnpNNDg3LjIzMiA1NC42YzIuMzk3IDAgNC40NDMtLjgwNiA2LjEzOC0yLjQxOCAxLjY5NS0xLjYxMiAyLjU0Mi0zLjQxIDIuNTQyLTUuMzk0IDAtMi4xNS0uODQ3LTMuOTg5LTIuNTQyLTUuNTE4LTEuNjk1LTEuNTMtMy43NC0yLjI5NC02LjEzOC0yLjI5NC0yLjM5NyAwLTQuNDY0Ljc2NS02LjIgMi4yOTQtMS43MzYgMS41My0yLjYwNCAzLjM2OS0yLjYwNCA1LjUxOCAwIDEuOTg0Ljg2OCAzLjc4MiAyLjYwNCA1LjM5NCAxLjczNiAxLjYxMiAzLjgwMyAyLjQxOCA2LjIgMi40MTh6bTAgNzIuMDQ0YzIuMjMyIDAgNC4xMzMtLjUzNyA1LjcwNC0xLjYxMiAxLjU3LTEuMDc1IDIuMzU2LTIuMjMyIDIuMzU2LTMuNDcyVjcyLjcwNGMwLTEuNDg4LS43ODUtMi42ODctMi4zNTYtMy41OTYtMS41Ny0uOTEtMy40NzItMS4zNjQtNS43MDQtMS4zNjQtMi4zMTUgMC00LjIxNi40NTUtNS43MDQgMS4zNjQtMS40ODguOTEtMi4yMzIgMi4xMDgtMi4yMzIgMy41OTZ2NDguODU2YzAgMS4yNC43NDQgMi4zOTcgMi4yMzIgMy40NzIgMS40ODggMS4wNzUgMy4zOSAxLjYxMiA1LjcwNCAxLjYxMnptNjUuMjQ3IDBjMi4wNjYgMCAzLjkyNi0uNDM0IDUuNTgtMS4zMDIgMS42NTMtLjg2OCAyLjQ4LTIuMTI5IDIuNDgtMy43ODJWOTIuMTcyYzAtNC42My0uOTcyLTguODQ1LTIuOTE0LTEyLjY0OC0xLjk0My0zLjgwMy00LjUyNi02Ljg0LTcuNzUtOS4xMTQtMy4yMjQtMi4yNzMtNi43NzktMy40MS0xMC42NjQtMy40MS00LjEzNCAwLTcuNjI2Ljk3MS0xMC40NzggMi45MTQtMi44NTIgMS45NDMtNC44OTggNC4xMTMtNi4xMzggNi41MXYtMy43MmMwLTEuNDg4LS42ODItMi42ODctMi4wNDYtMy41OTYtMS4zNjQtLjkxLTMuMDM4LTEuMzY0LTUuMDIyLTEuMzY0LTIuMzE1IDAtNC4yMTYuNDU1LTUuNzA0IDEuMzY0LTEuNDg4LjkxLTIuMjMyIDIuMTA4LTIuMjMyIDMuNTk2djQ4Ljg1NmMwIDEuMjQuNzQ0IDIuMzk3IDIuMjMyIDMuNDcyIDEuNDg4IDEuMDc1IDMuMzkgMS42MTIgNS43MDQgMS42MTIgMi4yMzIgMCA0LjEzMy0uNTM3IDUuNzA0LTEuNjEyIDEuNTctMS4wNzUgMi4zNTYtMi4yMzIgMi4zNTYtMy40NzJWOTIuMTcyYzAtMi4zMTUuNDk2LTQuMjk5IDEuNDg4LTUuOTUyLjk5Mi0xLjY1MyAyLjI3My0yLjkzNSAzLjg0NC0zLjg0NCAxLjU3LS45MSAzLjE4Mi0xLjM2NCA0LjgzNi0xLjM2NCAxLjk4NCAwIDMuODAyLjU1OCA1LjQ1NiAxLjY3NCAxLjY1MyAxLjExNiAyLjk1NSAyLjUgMy45MDYgNC4xNTRhMTAuNTIgMTAuNTIgMCAwMTEuNDI2IDUuMzMydjI5LjM4OGMwIDEuNjUzLjg2OCAyLjkxNCAyLjYwNCAzLjc4MiAxLjczNi44NjggMy41MTMgMS4zMDIgNS4zMzIgMS4zMDJ6bTQ3LjY4IDEuMTE2YzQuNDY0IDAgOC4zMjgtLjU1OCAxMS41OTQtMS42NzQgMy4yNjUtMS4xMTYgNS43ODYtMi40OCA3LjU2NC00LjA5MiAxLjc3Ny0xLjYxMiAyLjY2Ni0zLjEyIDIuNjY2LTQuNTI2IDAtLjgyNy0uMjQ4LTEuNzk4LS43NDQtMi45MTRhOC42NDUgOC42NDUgMCAwMC0yLjEwOC0yLjkxNGMtLjkxLS44MjctMS45ODQtMS4yNC0zLjIyNC0xLjI0LTEuMTU4IDAtMi4zOTguMzcyLTMuNzIgMS4xMTYtMS4zMjMuNzQ0LTIuODk0IDEuNTMtNC43MTIgMi4zNTYtMS44MTkuODI3LTQuMDkyIDEuMjQtNi44MiAxLjI0LTQuMjk5IDAtNy43OTItMS4wOTUtMTAuNDc4LTMuMjg2LTIuNjg3LTIuMTktNC4wMy01LjA2My00LjAzLTguNjE4di0xLjg2aDI1LjE3MmMxLjkwMSAwIDMuNzQtLjE4NiA1LjUxOC0uNTU4IDEuNzc3LS4zNzIgMy4yNDQtMS4zMjMgNC40MDItMi44NTIgMS4xNTctMS41MyAxLjczNi00LjA3MSAxLjczNi03LjYyNiAwLTQuNjMtMS4xOTktOC42OC0zLjU5Ni0xMi4xNTItMi4zOTgtMy40NzItNS41MTgtNi4yLTkuMzYyLTguMTg0LTMuODQ0LTEuOTg0LTguMDgtMi45NzYtMTIuNzEtMi45NzYtNS4wNDMgMC05LjYxIDEuMTM3LTEzLjcwMiAzLjQxLTQuMDkyIDIuMjczLTcuMzU4IDUuMjktOS43OTYgOS4wNTItMi40MzkgMy43NjEtMy42NTggNy44NzQtMy42NTggMTIuMzM4djEwLjU0YzAgNS4wNDMgMS4yODEgOS40ODYgMy44NDQgMTMuMzMgMi41NjIgMy44NDQgNi4wOTYgNi44MiAxMC42MDIgOC45MjggNC41MDUgMi4xMDggOS42OTIgMy4xNjIgMTUuNTYyIDMuMTYyem00LjA5Mi0zNS44MzZoLTE4LjEwNHYtMy40NzJjMC0xLjk4NC41MTYtMy43IDEuNTUtNS4xNDYgMS4wMzMtMS40NDcgMi4zNzYtMi41NjMgNC4wMy0zLjM0OCAxLjY1My0uNzg1IDMuNDMtMS4xNzggNS4zMzItMS4xNzggMS45ODQgMCAzLjgwMi40MTMgNS40NTYgMS4yNCAxLjY1My44MjcgMi45NzYgMS45ODQgMy45NjggMy40NzJzMS40ODggMy4xODMgMS40ODggNS4wODRjMCAxLjMyMy0uMjY5IDIuMjExLS44MDYgMi42NjYtLjUzOC40NTUtMS41MDkuNjgyLTIuOTE0LjY4MnoiLz48L3N2Zz4=)
Copy svg code
You can also install `@mantinex/mantine-logo` package and import `MantineLogo` component. Note that the package depends on `@mantine/core` and `@mantine/hooks` packages.
yarnnpm
yarn add @mantinex/mantine-logo
Expand code
Color
Type
Full
Mark
Size
Demo.tsx
import { MantineLogo } from '@mantinex/mantine-logo';
function Demo() {
return ;
}
Expand code
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Mantine API overview | Mantine
API overview
============
This guide will help you get familiar with core Mantine concepts. Please read this guide, [theming](/theming/theme-object/)
and [styles](/styles/css-modules/)
sections before starting development to learn about all of the available theming and styling features.
[MantineProvider](#mantineprovider)
------------------------------------
[MantineProvider](/theming/mantine-provider/)
is required to be rendered at the root of your application. It is responsible for:
* Providing [theme](/theming/theme-object/)
context
* Adding [CSS variables](/styles/css-variables/)
to the document
* Managing [color scheme](/theming/color-schemes/)
(light, dark, auto)
import { MantineProvider } from '@mantine/core';
function Demo() {
return {/* Your app here */};
}
[Theme object](#theme-object)
------------------------------
[Theme object](/theming/theme-object/)
stores design tokens, components default props, context styles and other data that can be accessed by any Mantine component. Most of the `theme` values are exposed as [CSS variables](/styles/css-variables/)
and can be accessed both in JavaScript and CSS.
import { createTheme, MantineProvider } from '@mantine/core';
// Your theme configuration is merged with default theme
const theme = createTheme({
fontFamily: 'Montserrat, sans-serif',
defaultRadius: 'md',
});
function Demo() {
return (
{/* Your app here */}
);
}
Access theme values in styles:
.demo {
background: var(--mantine-color-red-1);
color: var(--mantine-color-red-9);
font-family: var(--mantine-font-family);
border-radius: var(--mantine-radius-md);
}
Access theme values in JavaScript:
import { lighten, useMantineTheme } from '@mantine/core';
function Demo() {
const theme = useMantineTheme();
const style = {
// You can use CSS variables in inline styles
background: 'var(--mantine-color-red-9)',
// Or use values from theme object if you need to modify them
color: lighten(theme.colors.red[9], 0.2),
};
return ;
}
[Colors](#colors)
------------------
[Colors](/theming/colors/)
are stored in `theme.colors` object and are exposed as [CSS variables](/styles/css-variables/)
. Each color must have at least 10 shades. You can generate new colors based on a single color value with the [colors generator](/colors-generator/)
.
Colors are numbered from 0 to 9 where 0 is the lightest and 9 is the darkest color. Example of `blue` color from the default theme:
blue 0
#e7f5ff
blue 1
#d0ebff
blue 2
#a5d8ff
blue 3
#74c0fc
blue 4
#4dabf7
blue 5
#339af0
blue 6
#228be6
blue 7
#1c7ed6
blue 8
#1971c2
blue 9
#1864ab
To access colors in styles use [CSS variables](/styles/css-variables/)
:
.demo {
background: var(--mantine-color-blue-9);
color: var(--mantine-color-blue-0);
}
[CSS modules](#css-modules)
----------------------------
All Mantine components use [CSS modules](/styles/css-modules/)
for styling. It is recommended to use [CSS modules](/styles/css-modules/)
in your project as well, but it is not required – Mantine components are fully compatible with any third-party styling solution and native CSS.
CSS modules are available in most modern frameworks out of the box. To use them, create a file with `.module.css` extension:
/* Button.module.css */
.button {
color: red;
}
And then import it in your component:
import classes from './Button.module.css';
function Demo() {
return (
);
}
[PostCSS preset](#postcss-preset)
----------------------------------
[postcss-preset-mantine](/styles/postcss-preset/)
provides several CSS functions and mixins to simplify your styles. It is not required to use it, but highly recommended. All demos that feature styles assume that you have this preset installed.
[postcss-preset-mantine](/styles/postcss-preset/)
allows you to use functions and mixins in `.css` files:
.demo {
padding: rem(20px); /* Convert px to rem */
/* Convert px to em (for media queries) */
@media (max-width: em(500px)) {
}
/* light and dark mixins to apply styles based on Mantine color scheme */
@mixin light {
background-color: var(--mantine-color-white);
}
@mixin dark {
background-color: var(--mantine-color-black);
}
/* light-dark function as an inline shortcut for light and dark mixins */
background: light-dark(
var(--mantine-color-white),
var(--mantine-color-black)
);
/* rtl mixin to apply styles for right-to-left direction */
padding-left: 1rem;
@mixin rtl {
padding-left: 0;
padding-right: 1rem;
}
}
[Vanilla extract](#vanilla-extract)
------------------------------------
[Vanilla extract](/styles/vanilla-extract/)
is a good alternative to [CSS modules](/styles/css-modules/)
if you prefer to write styles in JavaScript. Mantine provides [Vanilla extract](/styles/vanilla-extract/)
integration with `@mantine/vanilla-extract` package.
[CSS variables](#css-variables)
--------------------------------
[Theme](/theming/theme-object/)
values are converted to [CSS variables](/styles/css-variables/)
and are available to use in your styles. All Mantine CSS variables are prefixed with `--mantine-`, for example:
* `theme.fontFamily` → `--mantine-font-family`
* `theme.colors.blue[9]` → `--mantine-color-blue-9`
* `theme.spacing.xl` → `--mantine-spacing-xl`
Most of Mantine components have associated [CSS variables](/styles/styles-api/)
that can be customized in [theme](/theming/theme-object/)
or inline with `vars` prop. Example of customizing [Button](/core/button/)
CSS variables to add new `xxl` and `xxs` sizes:
XXL ButtonXXS Button
MantineProvider.tsxInline.tsx
import { Button, Group, MantineProvider, createTheme } from '@mantine/core';
const theme = createTheme({
components: {
Button: Button.extend({
vars: (theme, props) => {
if (props.size === 'xxl') {
return {
root: {
'--button-height': '60px',
'--button-padding-x': '30px',
'--button-fz': '24px',
},
};
}
if (props.size === 'xxs') {
return {
root: {
'--button-height': '24px',
'--button-padding-x': '10px',
'--button-fz': '10px',
},
};
}
return { root: {} };
},
}),
},
});
function Demo() {
return (
);
}
Expand code
[Styles API](#styles-api)
--------------------------
[Styles API](/styles/styles-api/)
is a set of props and techniques that allows you to customize styles of any element inside Mantine component inline or with [theme object](/theming/theme-object/)
. All Mantine components that have styles support [Styles API](/styles/styles-api/)
.
Every Mantine component has a set of elements names that can be used to apply styles to inner elements inside the component. Example of [TextInput](/core/text-input/)
component selectors:
| Selector | Static selector | Description |
| --- | --- | --- |
| wrapper | .mantine-TextInput\-wrapper | Root element of the Input |
| input | .mantine-TextInput\-input | Input element |
| section | .mantine-TextInput\-section | Left and right sections |
| root | .mantine-TextInput\-root | Root element |
| label | .mantine-TextInput\-label | Label element |
| required | .mantine-TextInput\-required | Required asterisk element, rendered inside label |
| description | .mantine-TextInput\-description | Description element |
| error | .mantine-TextInput\-error | Error element |
These selectors can be used to apply styles to inner elements with [classNames or styles](/styles/styles-api/)
props:
Floating label input
Demo.tsxDemo.module.css
import { useState } from 'react';
import { TextInput } from '@mantine/core';
import classes from './Demo.module.css';
function Demo() {
const [value, setValue] = useState('');
const [focused, setFocused] = useState(false);
const floating = focused || value.length > 0 || undefined;
return (
setFocused(true)}
onBlur={() => setFocused(false)}
value={value}
onChange={(event) => setValue(event.currentTarget.value)}
/>
);
}
Expand code
[Color scheme](#color-scheme)
------------------------------
All Mantine components support `light`, `dark` and `auto` [color schemes](/theming/color-schemes/)
. By default, the color scheme is `light`, it can be changed by the user and will be persisted in `localStorage`.
You can configure the default color scheme on [MantineProvider](/theming/mantine-provider/)
:
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
{/* Your app here */}
);
}
And use [useMantineColorScheme hook](/theming/color-schemes/)
to create color scheme toggle control:
Demo.tsxDemo.module.css
import { ActionIcon, useMantineColorScheme, useComputedColorScheme } from '@mantine/core';
import { IconSun, IconMoon } from '@tabler/icons-react';
import cx from 'clsx';
import classes from './Demo.module.css';
function Demo() {
const { setColorScheme } = useMantineColorScheme();
const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
return (
setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')}
variant="default"
size="xl"
aria-label="Toggle color scheme"
>
);
}
Expand code
[Unstyled components](#unstyled-components)
--------------------------------------------
You can use Mantine as a [headless UI library](/styles/unstyled/)
. To do that, simply do not import `@mantine/*/styles.css` in your application. Then you will be able to apply styles to Mantine components using the [Styles API](/styles/styles-api/)
with a styling solution of your choice.
All components also support [unstyled prop](/styles/unstyled/)
that removes all library styles from the component:
ChatGalleryAccount
Chat panel
Gallery panel
Account panel
Demo.tsx
import { Tabs } from '@mantine/core';
function Demo() {
return (
ChatGalleryAccountChat panelGallery panelAccount panel
);
}
Expand code
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Getting started | Mantine
Getting started
===============
[Get started with a template](#get-started-with-a-template)
------------------------------------------------------------
The easiest way to get started is to use one of the templates. All templates include required dependencies and pre-configured settings. Some templates also include additional features like [Jest](https://jestjs.io/)
, [Storybook](https://storybook.js.org/)
, [ESLint](https://eslint.org/)
, etc.
Templates include only `@mantine/core` and `@mantine/hooks` packages, if you need additional `@mantine/*` packages, follow installation instructions of the package you want to use.
To get started with a template, open it on GitHub and click "Use this template" button. In order to use this feature you need to be logged in to your GitHub account. If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template [in this article](https://help.mantine.dev/q/templates-usage)
.
Templates list:
| | | |
| --- | --- | --- |
| | next-app-template
Next.js template with app router and full setup: Jest, Storybook, ESLint | [Use template](https://github.com/mantinedev/next-app-template) |
| | next-pages-template
Next.js template with pages router and full setup: Jest, Storybook, ESLint | [Use template](https://github.com/mantinedev/next-pages-template) |
| | next-app-min-template
Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration | [Use template](https://github.com/mantinedev/next-app-min-template) |
| | next-pages-min-template
Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration | [Use template](https://github.com/mantinedev/next-pages-min-template) |
| | next-vanilla-extract-template
Next.js template with Vanilla extract example | [Use template](https://github.com/mantinedev/next-vanilla-extract-template) |
| | vite-template
Vite template with full setup: Vitest, Prettier, Storybook, ESLint | [Use template](https://github.com/mantinedev/vite-template) |
| | vite-min-template
Vite template with minimal setup – no additional tools included, only default Vite configuration | [Use template](https://github.com/mantinedev/vite-min-template) |
| | vite-vanilla-extract-template
Vite template with Vanilla extract example | [Use template](https://github.com/mantinedev/vite-vanilla-extract-template) |
| | gatsby-template
RedwoodJS template with basic setup | [Use template](https://github.com/mantinedev/redwood-template) |
[Community templates](#community-templates)
--------------------------------------------
Community templates are created and maintained by the community members. These templates include additional features and third-party integrations. You are welcome to share your template with the community by following [this guide](https://help.mantine.dev/q/submit-template)
.
| | | |
| --- | --- | --- |
| | Your template here
Create a template with your stack and share it with the community | [Submit template](https://help.mantine.dev/q/submit-template) |
| | t3-template
Vite + Waku + Mantine template | [Use template](https://github.com/doiska/waku-mantine-starter) |
[Framework guide](#framework-guide)
------------------------------------
If you want to add Mantine to an existing project or prefer to set up everything manually, follow one of the guides below to get started with Mantine and your preferred framework.
[Recommended\
\
Vite\
\
Best choice for a single page application (SPA)](/guides/vite/)
[Recommended\
\
Next.js\
\
Best choice for an application with SSR](/guides/next/)
[React Router\
\
Get started with React Router](/guides/react-router/)
[Redwood\
\
Get started with RedwoodJS](/guides/redwood/)
[Gatsby\
\
Get started with Gatsby](/guides/gatsby/)
[Can I use Mantine with create-react-app?](#can-i-use-mantine-with-create-react-app)
-------------------------------------------------------------------------------------
[Create React App](https://create-react-app.dev/)
was deprecated in early 2023 ([comment from maintainers](https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741)
). It is not recommended to use it for new projects. It is recommended to use [Vite](https://vitejs.dev/)
or [Next.js](https://nextjs.org/)
instead. Starting from version 7.0, certain Mantine styling features are no longer officially supported in Create React App. If you still prefer to use Create React App, follow [this guide](https://help.mantine.dev/q/can-i-use-mantine-with-cra)
.
[Get started without framework](#get-started-without-framework)
----------------------------------------------------------------
Choose packages that you will use in your application:
| | Package | Description |
| --- | --- | --- |
| | `@mantine/hooks` | Hooks for state and UI management |
| | `@mantine/core` | Core components library: inputs, buttons, overlays, etc. |
| | `@mantine/form` | Form management library |
| | `@mantine/dates` | Date inputs, calendars |
| | `@mantine/charts` | Recharts based charts library |
| | `@mantine/notifications` | Notifications system |
| | `@mantine/code-highlight` | Code highlight with your theme colors and styles |
| | `@mantine/tiptap` | Rich text editor based on Tiptap |
| | `@mantine/dropzone` | Capture files with drag and drop |
| | `@mantine/carousel` | Embla based carousel component |
| | `@mantine/spotlight` | Overlay command center |
| | `@mantine/modals` | Centralized modals manager |
| | `@mantine/nprogress` | Navigation progress |
Install dependencies:
yarnnpm
yarn add @mantine/core @mantine/hooks
Expand code
Install PostCSS plugins and [postcss-preset-mantine](/styles/postcss-preset/)
:
yarnnpm
yarn add --dev postcss postcss-preset-mantine postcss-simple-vars
Expand code
> **PostCSS without framework**
>
> If you are using a framework that is not officially supported, you may need to configure PostCSS manually. Please refer to the framework's documentation for specific instructions. For instance, if you are using Webpack, it will be necessary to install and set up [postcss-loader](https://webpack.js.org/loaders/postcss-loader/)
> .
Create `postcss.config.cjs` file at the root of your application with the following content:
module.exports = {
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};
Add styles imports to the root of your application. Usually styles are imported once in the root file. For example, if you are using Next.js with pages router, you can import styles in `_app.tsx` file:
// core styles are required for all packages
import '@mantine/core/styles.css';
// other css files are required only if
// you are using components from the corresponding package
// import '@mantine/dates/styles.css';
// import '@mantine/dropzone/styles.css';
// import '@mantine/code-highlight/styles.css';
// ...
Wrap your application with [MantineProvider](/theming/mantine-provider/)
:
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({
/** Put your mantine theme override here */
});
function Demo() {
return (
{/* Your app here */}
);
}
If your application has server side rendering, add [ColorSchemeScript](/theming/color-schemes/)
to the `` of your application:
import { ColorSchemeScript } from '@mantine/core';
function Demo() {
return (
My awesome app
{/* Your app here */}
);
}
All set! You can now use Mantine components in your application.
[Set up VS Code](#set-up-vs-code)
----------------------------------
By default, VS Code does not recognize postcss syntax, you need to install [PostCSS Intellisense and Highlighting](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-postcss)
to enable syntax highlighting and suppress variables (`$variable`) errors.
To get CSS variables autocomplete, install [CSS Variable Autocomplete extension](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables)
. Then create `.vscode/settings.json` file in the root folder of your project with the following content:
{
"cssVariables.lookupFiles": [\
"**/*.css",\
"**/*.scss",\
"**/*.sass",\
"**/*.less",\
"node_modules/@mantine/core/styles.css"\
]
}
[Learn](#learn)
----------------
Before you jump into the code, it is recommended to learn more about Mantine theming and styling options. The most important documentation pages are:
* [API overview](/overview/)
– overview of the most important Mantine styling and theming features
* [Theme object](/theming/theme-object/)
– learn about available theme properties
* [Colors](/theming/colors/)
– learn how to add/replace colors in the theme object
* [CSS modules](/styles/css-modules/)
– learn how to use CSS modules with Mantine
* [postcss-preset-mantine](/styles/postcss-preset/)
– learn about `postcss-preset-mantine` functions and mixins
* [Responsive styles](/styles/responsive/)
– learn how to apply responsive styles to components
* [Styles API](/styles/styles-api/)
– learn how to style internal elements of any component
* [Polymorphic components](/guides/polymorphic/)
– learn how to use polymorphic components to change rendered element
[Get help](#get-help)
----------------------
[Chat on Discord\
\
Join a community of 10,000+ developers to ask questions, share feedback and explore upcoming features](https://discord.gg/wbH82zuWMN)
[Start a discussion\
\
Request new features, ask questions and provide feedback with GitHub discussions](https://github.com/mantinedev/mantine/discussions)
[Help center\
\
Explore 30+ frequently asked questions](https://help.mantine.dev)
[Support Mantine](#support-mantine)
------------------------------------
All contributions to the projects are welcome and appreciated. Contribute financially by [sponsoring the project on OpenCollective](https://opencollective.com/mantinedev)
. Your sponsorship will help us to maintain the project and develop new features.
[Sponsor Mantine](https://opencollective.com/mantinedev)
Other ways to support the project:
* Share your feedback in [GitHub Discussions](https://github.com/mantinedev/mantine/discussions/categories/feedback)
– we are always happy to hear your thoughts on how to improve Mantine. Most of the new features and components are based on the feedback received from the community.
* Help others on [Discord](https://discord.gg/wbH82zuWMN)
and/or [GitHub Discussions](https://github.com/mantinedev/mantine/discussions)
. There are usually 10-20 new questions every day, you can help people with their issues and questions. While helping others, you will learn yourself and become more proficient with React and Mantine.
* Give us a code review. You are welcome to explore the [source code](https://github.com/mantinedev/mantine)
of `@mantine/*` packages and provide your feedback on how it can be improved. We are always open to new ideas and suggestions.
* Send us some [kind words](https://github.com/mantinedev/mantine/discussions/categories/kind-words)
. We usually receive only bug reports and feature requests, it is always nice to hear that people enjoy working with Mantine.
* Star the project on [GitHub](https://github.com/mantinedev/mantine)
. It is a small thing that helps us grow and get more people interested in the project.
* [Contribute](/contribute/)
to the Mantine codebase. We welcome all kinds of contributions: if you do not have much experience with React/TypeScript, you can help us improve the documentation to make it more clear and understandable for new developers. If you are an experienced React developer, you can help us with open [issues](https://github.com/mantinedev/mantine/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
.
* If you are using Mantine at work and your company wants to support the project, you can allocate some time of your engineers to contribute to Mantine.
[Mantine for Figma](#mantine-for-figma)
----------------------------------------
Design is not a part of the development process – there are no official Figma or Sketch design files. However, there are community-driven projects that provide Figma components based on Mantine. Note that these projects are not maintained by Mantine team, and it is not guaranteed that they are up-to-date with the latest Mantine version.
* [Design files by **Ravn**](https://www.figma.com/community/file/1293978471602433537)
* [Design files by **In The Zone**](https://www.figma.com/community/file/1067173247578645134)
* [Design files by **Devias**](https://www.figma.com/community/file/1212329956432440320/Mantine-UI-Design-System---v5.10)
* [Design files by **AlleyCorp Nord**](https://www.figma.com/community/file/1294398524808646906/mantine-lean-ui-library-alley-corp-nord)
[License](#license)
--------------------
All `@mantine/*` packages are distributed under [MIT](https://github.com/mantinedev/mantine/blob/master/LICENSE)
license. You can use them in any project, commercial or not, with or without attribution. All `@mantine/*` packages dependencies are also distributed under MIT license.
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Usage with Vite | Mantine
Usage with Vite
===============
[Get started with a template](#templates)
------------------------------------------
The easiest way to get started is to use one of the templates. All templates are configured correctly: they include [PostCSS setup](/styles/postcss-preset/)
, [ColorSchemeScript](/theming/color-schemes/)
and other essential features. Some templates also include additional features like [Jest](/guides/jest/)
, [Storybook](/guides/storybook/)
and ESLint.
If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on [this page](https://help.mantine.dev/q/templates-usage)
.
| | | |
| --- | --- | --- |
| | vite-template
Vite template with full setup: Vitest, Prettier, Storybook, ESLint | [Use template](https://github.com/mantinedev/vite-template) |
| | vite-min-template
Vite template with minimal setup – no additional tools included, only default Vite configuration | [Use template](https://github.com/mantinedev/vite-min-template) |
| | vite-vanilla-extract-template
Vite template with Vanilla extract example | [Use template](https://github.com/mantinedev/vite-vanilla-extract-template) |
[Generate new application](#generate-new-application)
------------------------------------------------------
Follow [Vite getting started](https://vitejs.dev/guide/)
guide to create new Vite application:
yarnnpm
yarn create vite
Expand code
[Installation](#installation)
------------------------------
Choose packages that you will use in your application:
| | Package | Description |
| --- | --- | --- |
| | `@mantine/hooks` | Hooks for state and UI management |
| | `@mantine/core` | Core components library: inputs, buttons, overlays, etc. |
| | `@mantine/form` | Form management library |
| | `@mantine/dates` | Date inputs, calendars |
| | `@mantine/charts` | Recharts based charts library |
| | `@mantine/notifications` | Notifications system |
| | `@mantine/code-highlight` | Code highlight with your theme colors and styles |
| | `@mantine/tiptap` | Rich text editor based on Tiptap |
| | `@mantine/dropzone` | Capture files with drag and drop |
| | `@mantine/carousel` | Embla based carousel component |
| | `@mantine/spotlight` | Overlay command center |
| | `@mantine/modals` | Centralized modals manager |
| | `@mantine/nprogress` | Navigation progress |
Install dependencies:
yarnnpm
yarn add @mantine/core @mantine/hooks
Expand code
[PostCSS setup](#postcss-setup)
--------------------------------
Install PostCSS plugins and [postcss-preset-mantine](/styles/postcss-preset/)
:
yarnnpm
yarn add --dev postcss postcss-preset-mantine postcss-simple-vars
Expand code
Create `postcss.config.cjs` file at the root of your application with the following content:
module.exports = {
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};
[Setup](#setup)
----------------
Add styles imports and [MantineProvider](/theming/mantine-provider/)
to your application root component (usually `App.tsx`):
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import { MantineProvider } from '@mantine/core';
export default function App() {
return {/* Your app here */};
}
All set! Start development server:
npm run dev
[Previous\
\
Usage with Next.js](/guides/next/)
[Next\
\
Usage with React Router](/guides/react-router/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Contributing to Mantine | Mantine
Contributing to Mantine
=======================
First of all, thank you for showing interest in contributing to Mantine! All your contributions are extremely valuable to the project!
[Ways to contribute](#ways-to-contribute)
------------------------------------------
* **Improve documentation:** Fix incomplete or missing docs, bad wording, examples or explanations.
* **Give feedback:** We are constantly working on making Mantine better. Please share how you use Mantine, what features are missing and what is done well via [GitHub Discussions](https://github.com/mantinedev/mantine/discussions/new)
or [Discord](https://discord.gg/wbH82zuWMN)
.
* **Share Mantine:** Share links to the Mantine docs with everyone who might be interested! [Share Mantine on X here](https://x.com/intent/tweet?text=Mantine%20%E2%80%93%20new%20React%20library%20with%20100%2B%20components%20and%20hooks.%20It%20has%20native%20dark%20theme%20support%20and%20focuses%20on%20accessibility%20and%20usability.%0A%0Ahttp%3A%2F%2Fmantine.dev%0A%0A%23reactjs%20)
.
* **Contribute to the codebase:** Propose new features via [GitHub Issues](https://github.com/mantinedev/mantine/issues/new)
, or find an [existing issue](https://github.com/mantinedev/mantine/labels/help%20wanted)
that you are interested in and work on it!
* **Give us a code review:** Help us identify problems with the [source code](https://github.com/mantinedev/mantine/tree/master/packages)
or make Mantine more performant.
[Contributing workflow](#contributing-workflow)
------------------------------------------------
* Decide on what you want to contribute.
* If you would like to implement a new feature, discuss it with the maintainer ([GitHub Discussions](https://github.com/mantinedev/mantine/discussions/new)
or [Discord](https://discord.gg/wbH82zuWMN)
) before jumping into coding.
* After finalizing issue details, you can begin working on the code.
* Run tests with `npm test` and submit a PR once all tests have passed.
* Get a code review and fix all issues noticed by the maintainer.
* If you cannot finish your task or if you change your mind – that's totally fine! Just let us know in the GitHub issue that you created during the first step of this process. The Mantine community is friendly – we won't judge or ask any questions if you decide to cancel your submission.
* Your PR is merged. You are awesome ❤️!
[Get started with Mantine locally](#get-started-with-mantine-locally)
----------------------------------------------------------------------
* Install the [editorconfig](https://editorconfig.org/)
extension for your editor.
* Fork the [repository](https://github.com/mantinedev/mantine)
, then clone or download your fork.
* Run `nvm use` to switch to the Node version specified in `.nvmrc` file ([install nvm](https://github.com/nvm-sh/nvm)
).
* Install dependencies with yarn – `yarn`
* Setup project – `npm run setup`
* Build local version of all packages – `npm run build all`
* To start storybook – `npm run storybook`
* To start docs – `npm run docs`
* To rebuild props descriptions – `npm run docs:docgen`
[npm scripts](#npm-scripts)
----------------------------
All npm scripts are located at [main package.json](https://github.com/mantinedev/mantine/blob/master/package.json)
. Individual packages do not have dedicated scripts.
### [Development scripts](#development-scripts)
* `storybook` – Starts the storybook development server. To start storybook for a specific component, use the `npm run storybook Tooltip` command.
* `docs` – Starts the docs development server.
### [Testing scripts](#testing-scripts)
* `syncpack` – runs [syncpack](https://www.npmjs.com/package/syncpack)
* `typecheck` – runs TypeScript typechecking with `tsc --noEmit` on all packages and docs
* `lint` – runs ESLint on src folder
* `jest` – runs tests with jest
* `test` – runs all above testing scripts
### [Docs scripts](#docs-scripts)
* `docs:docgen` – generates components types information with [docgen script](https://github.com/mantinedev/mantine/blob/master/scripts/docgen/index.ts)
* `docs:build` – builds docs for production
* `docs:deploy` – builds and deploys docs to the GitHub Pages
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Usage with Remix | Mantine
Usage with React Router
=======================
[Generate new application](#generate-new-application)
------------------------------------------------------
Follow [React Router getting started guide](https://reactrouter.com/start/framework/installation)
guide to create new React Router application:
npx create-react-router@latest my-react-router-app
[Installation](#installation)
------------------------------
Choose packages that you will use in your application:
| | Package | Description |
| --- | --- | --- |
| | `@mantine/hooks` | Hooks for state and UI management |
| | `@mantine/core` | Core components library: inputs, buttons, overlays, etc. |
| | `@mantine/form` | Form management library |
| | `@mantine/dates` | Date inputs, calendars |
| | `@mantine/charts` | Recharts based charts library |
| | `@mantine/notifications` | Notifications system |
| | `@mantine/code-highlight` | Code highlight with your theme colors and styles |
| | `@mantine/tiptap` | Rich text editor based on Tiptap |
| | `@mantine/dropzone` | Capture files with drag and drop |
| | `@mantine/carousel` | Embla based carousel component |
| | `@mantine/spotlight` | Overlay command center |
| | `@mantine/modals` | Centralized modals manager |
| | `@mantine/nprogress` | Navigation progress |
Install dependencies:
yarnnpm
yarn add @mantine/core @mantine/hooks
Expand code
[PostCSS setup](#postcss-setup)
--------------------------------
Install PostCSS plugins and [postcss-preset-mantine](/styles/postcss-preset/)
:
yarnnpm
yarn add --dev postcss postcss-preset-mantine postcss-simple-vars
Expand code
Create `postcss.config.cjs` file at the root of your application with the following content:
module.exports = {
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};
[Setup](#setup)
----------------
Add styles imports, [MantineProvider](/theming/mantine-provider/)
and [ColorSchemeScript](/theming/color-schemes/)
to `app/root.tsx`:
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "react-router";
import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core';
export function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
// ... other app/root.tsx content
All set! Start development server:
npm run dev
[Next\
\
MantineProvider](/theming/mantine-provider/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Usage with Redwood | Mantine
Usage with RedwoodJS
====================
[Get started with a template](#templates)
------------------------------------------
The easiest way to get started is to use one of the templates. All templates are configured correctly: they include [PostCSS setup](/styles/postcss-preset/)
, [ColorSchemeScript](/theming/color-schemes/)
and other essential features. Some templates also include additional features like [Jest](/guides/jest/)
, [Storybook](/guides/storybook/)
and ESLint.
If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on [this page](https://help.mantine.dev/q/templates-usage)
.
| | | |
| --- | --- | --- |
| | redwood-template
RedwoodJS template with basic setup | [Use template](https://github.com/mantinedev/redwood-template) |
[Generate new application](#generate-new-application)
------------------------------------------------------
Follow [Redwood getting started guide](https://redwoodjs.com/docs/quick-start)
guide to create new Redwood application:
yarn create redwood-app my-redwood-project --typescript
[Installation](#installation)
------------------------------
**Note that it is recommended to use `yarn` instead of `npm` to install dependencies.**
Open `web` directory before installing dependencies:
cd web
Choose packages that you will use in your application:
| | Package | Description |
| --- | --- | --- |
| | `@mantine/hooks` | Hooks for state and UI management |
| | `@mantine/core` | Core components library: inputs, buttons, overlays, etc. |
| | `@mantine/form` | Form management library |
| | `@mantine/dates` | Date inputs, calendars |
| | `@mantine/charts` | Recharts based charts library |
| | `@mantine/notifications` | Notifications system |
| | `@mantine/code-highlight` | Code highlight with your theme colors and styles |
| | `@mantine/tiptap` | Rich text editor based on Tiptap |
| | `@mantine/dropzone` | Capture files with drag and drop |
| | `@mantine/carousel` | Embla based carousel component |
| | `@mantine/spotlight` | Overlay command center |
| | `@mantine/modals` | Centralized modals manager |
| | `@mantine/nprogress` | Navigation progress |
Install dependencies:
yarnnpm
yarn add @mantine/core @mantine/hooks
Expand code
[PostCSS setup](#postcss-setup)
--------------------------------
Install PostCSS plugins and [postcss-preset-mantine](/styles/postcss-preset/)
:
yarnnpm
yarn add --dev postcss postcss-preset-mantine postcss-simple-vars
Expand code
Create `postcss.config.js` file in `web` directory with the following content:
module.exports = {
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};
[Setup](#setup)
----------------
Add styles imports, [MantineProvider](/theming/mantine-provider/)
and [ColorSchemeScript](/theming/color-schemes/)
to `web/src/App.tsx` file:
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web';
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo';
import FatalErrorPage from 'src/pages/FatalErrorPage';
import Routes from 'src/Routes';
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
const App = () => (
);
export default App;
All set! Start development server:
yarn rw dev
[Previous\
\
Usage with Gatsby](/guides/gatsby/)
[Next\
\
Usage with Storybook](/guides/storybook/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Colors generator | Mantine
Mantine colors generator
========================
Enter base color
Display colors info
Copy URL
Preset
Blue grayBrownTomatoDeep orangeBright orangeYellowBright greenGreenLight blueSky bluePale blueBright blueDeep bluePale indigoPurplePale purpleVioletPale violetDark pinkBright pinkPinkMagentaBright redPale redDeep redRed
0#ecf4ff
1#dce4f5
2#b9c7e2
3#94a8d0
4#748dc0
5#5f7cb7
6#5474b4
7#44639f
8#3a5890
9#2c4b80
Variants preview
| Filled | Light | Outline | Subtle |
| --- | --- | --- | --- |
| Button | Button | Button | Button |
Colors array
[\
"#ecf4ff",\
"#dce4f5",\
"#b9c7e2",\
"#94a8d0",\
"#748dc0",\
"#5f7cb7",\
"#5474b4",\
"#44639f",\
"#3a5890",\
"#2c4b80"\
]
Usage with MantineProvider
import { MantineProvider, createTheme, MantineColorsTuple } from '@mantine/core';
const myColor: MantineColorsTuple = [\
'#ecf4ff',\
'#dce4f5',\
'#b9c7e2',\
'#94a8d0',\
'#748dc0',\
'#5f7cb7',\
'#5474b4',\
'#44639f',\
'#3a5890',\
'#2c4b80'\
];
const theme = createTheme({
colors: {
myColor,
}
});
function Demo() {
return (
{/* Your app here */}
);
}
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Usage with Next.js | Mantine
Usage with Next.js
==================
[Get started with a template](#templates)
------------------------------------------
The easiest way to get started is to use one of the templates. All templates are configured correctly: they include [PostCSS setup](/styles/postcss-preset/)
, [ColorSchemeScript](/theming/color-schemes/)
and other essential features. Some templates also include additional features like [Jest](/guides/jest/)
, [Storybook](/guides/storybook/)
and ESLint.
If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on [this page](https://help.mantine.dev/q/templates-usage)
.
| | | |
| --- | --- | --- |
| | next-app-template
Next.js template with app router and full setup: Jest, Storybook, ESLint | [Use template](https://github.com/mantinedev/next-app-template) |
| | next-pages-template
Next.js template with pages router and full setup: Jest, Storybook, ESLint | [Use template](https://github.com/mantinedev/next-pages-template) |
| | next-app-min-template
Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration | [Use template](https://github.com/mantinedev/next-app-min-template) |
| | next-pages-min-template
Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration | [Use template](https://github.com/mantinedev/next-pages-min-template) |
| | next-vanilla-extract-template
Next.js template with Vanilla extract example | [Use template](https://github.com/mantinedev/next-vanilla-extract-template) |
[Generate new application](#generate-new-application)
------------------------------------------------------
Follow [create-next-app](https://nextjs.org/docs/pages/api-reference/create-next-app)
guide to create new Next.js application:
yarnnpm
yarn create next-app --typescript
Expand code
[Installation](#installation)
------------------------------
Choose packages that you will use in your application:
| | Package | Description |
| --- | --- | --- |
| | `@mantine/hooks` | Hooks for state and UI management |
| | `@mantine/core` | Core components library: inputs, buttons, overlays, etc. |
| | `@mantine/form` | Form management library |
| | `@mantine/dates` | Date inputs, calendars |
| | `@mantine/charts` | Recharts based charts library |
| | `@mantine/notifications` | Notifications system |
| | `@mantine/code-highlight` | Code highlight with your theme colors and styles |
| | `@mantine/tiptap` | Rich text editor based on Tiptap |
| | `@mantine/dropzone` | Capture files with drag and drop |
| | `@mantine/carousel` | Embla based carousel component |
| | `@mantine/spotlight` | Overlay command center |
| | `@mantine/modals` | Centralized modals manager |
| | `@mantine/nprogress` | Navigation progress |
Install dependencies:
yarnnpm
yarn add @mantine/core @mantine/hooks
Expand code
[PostCSS setup](#postcss-setup)
--------------------------------
Install PostCSS plugins and [postcss-preset-mantine](/styles/postcss-preset/)
:
yarnnpm
yarn add --dev postcss postcss-preset-mantine postcss-simple-vars
Expand code
Create `postcss.config.cjs` file at the root of your application with the following content:
module.exports = {
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};
[Setup with pages router](#setup-with-pages-router)
----------------------------------------------------
Add styles imports and [MantineProvider](/theming/mantine-provider/)
to the `pages/_app.tsx` file:
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import type { AppProps } from 'next/app';
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({
/** Put your mantine theme override here */
});
export default function App({ Component, pageProps }: AppProps) {
return (
);
}
Create `pages/_document.tsx` file with [ColorSchemeScript](/theming/color-schemes/)
component. Note that it is required even if you use only one color scheme in your application.
import { Head, Html, Main, NextScript } from 'next/document';
import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core';
export default function Document() {
return (
);
}
All set! Start development server:
npm run dev
[Setup with app router](#setup-with-app-router)
------------------------------------------------
Add [MantineProvider](/theming/mantine-provider/)
, [ColorSchemeScript](/theming/color-schemes/)
and styles imports to the `app/layout.tsx` file:
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core';
export const metadata = {
title: 'My Mantine app',
description: 'I have followed setup instructions carefully',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
All set! Start development server:
npm run dev
[app + pages router together](#app--pages-router-together)
-----------------------------------------------------------
If you use both app and pages router in one application, you need to setup both `pages/_app.tsx` and `app/layout.tsx` files as described above.
[Next.js Link with polymorphic components](#nextjs-link-with-polymorphic-components)
-------------------------------------------------------------------------------------
import Link from 'next/link';
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
[Server components](#server-components)
----------------------------------------
All Mantine components use `useContext` hook to support [default props](/theming/default-props/)
and [Styles API](/styles/styles-api/)
. Mantine components cannot be used as server components. It means that components will render both on the server and client.
Entry points of all `@mantine/*` packages (`index.js` files) have `'use client';` directive at the top of the file – you do not need to add `'use client';` to your pages/layouts/components.
[Compound components in server components](#compound-components-in-server-components)
--------------------------------------------------------------------------------------
Some components like [Popover](/core/popover/)
have associated compound components (`Component.XXX`), where `XXX` is a compound component name. Compound components cannot be used in server components. Instead, use `ComponentXXX` syntax or add `'use client';` directive to the top of the file.
Example that will not work in server components:
import { Popover } from '@mantine/core';
// This will throw an error
export default function Page() {
return (
TargetDropdown
);
}
Example with `'use client';` directive:
'use client';
import { Popover } from '@mantine/core';
// No error
export default function Page() {
return (
TargetDropdown
);
}
Example with `ComponentXXX` syntax:
import {
Popover,
PopoverDropdown,
PopoverTarget,
} from '@mantine/core';
// No error
export default function Page() {
return (
TriggerDropdown
);
}
[app router tree shaking](#app-router-tree-shaking)
----------------------------------------------------
To enable tree shaking with app router, enable experimental `optimizePackageImports` feature in your `next.config.mjs`:
export default {
// ...other configuration
experimental: {
optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
},
};
[Troubleshooting](#troubleshooting)
------------------------------------
If you have any issues with Mantine in your Next.js application, please check [Help Center article](https://help.mantine.dev/q/server-components)
that covers most common issues with app router and server components.
[Previous\
\
Icons libraries](/guides/icons/)
[Next\
\
Usage with Vite](/guides/vite/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Styles API | Mantine
Styles API
==========
[What is Styles API](#what-is-styles-api)
------------------------------------------
The styles API is a set of props and techniques that allows you to customize the style of any element inside a Mantine component – inline or using the [theme object](/theming/theme-object/)
. All Mantine components that have styles support Styles API.
[Styles API selectors](#styles-api-selectors)
----------------------------------------------
Every Mantine component that supports the styles API has a set of element names that can be used to apply styles to inner elements inside the component. For simplicity, these elements names are called selectors in Mantine documentation. You can find selectors information under the `Styles API` tab in a component's documentation.
Example of [Button](/core/button/)
component selectors:
| Selector | Static selector | Description |
| --- | --- | --- |
| root | .mantine-Button\-root | Root element |
| loader | .mantine-Button\-loader | Loader component, displayed only when `loading` prop is set |
| inner | .mantine-Button\-inner | Contains all other elements, child of the `root` element |
| section | .mantine-Button\-section | Left and right sections of the button |
| label | .mantine-Button\-label | Button children |
You can use these selectors in `classNames` and `styles` in, both, component props and `theme.components`:
import { Button, createTheme, MantineProvider } from '@mantine/core';
function ClassNamesDemo() {
return (
);
}
function StylesDemo() {
return (
);
}
const theme = createTheme({
components: {
Button: Button.extend({
classNames: {
root: 'my-root-class',
label: 'my-label-class',
inner: 'my-inner-class',
},
styles: {
root: { backgroundColor: 'red' },
label: { color: 'blue' },
inner: { fontSize: 20 },
},
}),
},
});
function ProviderDemo() {
return (
);
}
[classNames prop](#classnames-prop)
------------------------------------
With the `classNames` prop you can add classes to inner elements of Mantine components. It accepts an object with element names as keys and classes as values:
Floating label input
Demo.tsxDemo.module.css
import { useState } from 'react';
import { TextInput } from '@mantine/core';
import classes from './Demo.module.css';
function Demo() {
const [value, setValue] = useState('');
const [focused, setFocused] = useState(false);
const floating = focused || value.length > 0 || undefined;
return (
setFocused(true)}
onBlur={() => setFocused(false)}
value={value}
onChange={(event) => setValue(event.currentTarget.value)}
/>
);
}
Expand code
[classNames in theme.components](#classnames-in-themecomponents)
-----------------------------------------------------------------
You can also define `classNames` in [`theme.components`](/theming/theme-object/)
to apply them to all components of a specific type:
import { useState } from 'react';
import {
createTheme,
MantineProvider,
TextInput,
} from '@mantine/core';
// Styles are the same as in previous example
import classes from './Demo.module.css';
const theme = createTheme({
components: {
TextInput: TextInput.extend({
classNames: {
root: classes.root,
input: classes.input,
label: classes.label,
},
}),
},
});
function Demo() {
return (
{/* Your app here */}
);
}
[Components CSS variables](#components-css-variables)
------------------------------------------------------
Most of Mantine components use CSS variables to define colors, sizes, paddings and other properties. You can override these values using a custom CSS variables resolver function in [theme.components](/theming/theme-object/)
or by passing it to the `vars` prop.
You can find CSS variables information under the `Styles API` tab in a component's documentation. Example of [Button](/core/button/)
component CSS variables:
| Selector | Variable | Description |
| --- | --- | --- |
| root | \--button-bg | Controls `background` |
| \--button-bd | Control `border` |
| \--button-hover | Controls `background` when hovered |
| \--button-color | Control text `color` |
| \--button-hover-color | Control text `color` when hovered |
| \--button-radius | Controls `border-radius` |
| \--button-height | Controls `height` of the button |
| \--button-padding-x | Controls horizontal `padding` of the button |
| \--button-fz | Controls `font-size` of the button |
| \--button-justify | Controls `justify-content` of `inner` element |
Example of a custom CSS variables resolver function used to add more sizes to the [Button](/core/button/)
component:
XXL ButtonXXS Button
MantineProvider.tsxInline.tsx
import { Button, Group, MantineProvider, createTheme } from '@mantine/core';
const theme = createTheme({
components: {
Button: Button.extend({
vars: (theme, props) => {
if (props.size === 'xxl') {
return {
root: {
'--button-height': '60px',
'--button-padding-x': '30px',
'--button-fz': '24px',
},
};
}
if (props.size === 'xxs') {
return {
root: {
'--button-height': '24px',
'--button-padding-x': '10px',
'--button-fz': '10px',
},
};
}
return { root: {} };
},
}),
},
});
function Demo() {
return (
);
}
Expand code
[styles prop](#styles-prop)
----------------------------
The `styles` prop works the same way as `classNames`, but applies inline styles. Note that inline styles have higher specificity than classes, so you will not be able to override them with classes without using `!important`. You cannot use pseudo-classes (for example, `:hover`, `:first-of-type`) and media queries inside the `styles` prop.
Gradient button
Demo.tsx
import { Button } from '@mantine/core';
function Demo() {
const gradient =
'linear-gradient(45deg, var(--mantine-color-pink-filled) 0%, var(--mantine-color-orange-filled) 50%, var(--mantine-color-yellow-filled) 100%)';
return (
);
}
Expand code
> **styles prop usage**
>
> Some examples and demos in the documentation use the `styles` prop for convenience, but it is not recommended to use the `styles` prop as the primary means of styling components, as the `classNames` prop is more flexible and has [better performance](/styles/styles-performance/)
> .
[Styles API based on component props](#styles-api-based-on-component-props)
----------------------------------------------------------------------------
You can also pass a callback function to `classNames` and `styles`. This function will receive [theme](/theming/theme-object/)
as first argument and component props as second. It should return an object of classes (for `classNames`) or styles (for `styles`).
You can use this feature to conditionally apply styles based on component props. For example, you can change the [TextInput](/core/text-input/)
label color if the input is required or change the input background color if the input is wrong:
Required input \*
Input with error
Demo.tsxDemo.module.css
import cx from 'clsx';
import { MantineProvider, createTheme, TextInput } from '@mantine/core';
import classes from './Demo.module.css';
const theme = createTheme({
components: {
TextInput: TextInput.extend({
classNames: (_theme, props) => ({
label: cx({ [classes.labelRequired]: props.required }),
input: cx({ [classes.inputError]: props.error }),
}),
}),
},
});
function Demo() {
return (
);
}
Expand code
[Static classes](#static-classes)
----------------------------------
Every component that supports Styles API also includes static classes that can be used to style component without using `classNames` or `styles` props. By default, static classes have `.mantine-{ComponentName}-{selector}` format. For example, `root` selector of [Button](/core/button/)
component will have `.mantine-Button-root` class.
You can use static classes to style a component with CSS or [any other styling solution](/styles/css-modules/#styling-mantine-components-without-css-modules)
:
.mantine-Button-root {
background-color: red;
}
The prefix of static classes can be changed with `classNamesPrefix` of [MantineProvider](/theming/mantine-provider/#classnamesprefix)
.
[Components classes](#components-classes)
------------------------------------------
Classes of each component are available in the `Component.classes` object. For example, you can find the classes of [Button](/core/button/)
in `Button.classes`:
| Key | Class |
| --- | --- |
| root | m\_77c9d27d |
| inner | m\_80f1301b |
| label | m\_811560b9 |
| section | m\_a74036a |
| loader | m\_a25b86ee |
| group | m\_80d6d844 |
| groupSection | m\_70be2a01 |
You can use these classes to create components with the same styles as Mantine components:
import { Button } from '@mantine/core';
function Demo() {
return ;
}
[Previous\
\
Responsive styles](/styles/responsive/)
[Next\
\
data-\* attributes](/styles/data-attributes/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Usage with Gatsby | Mantine
Usage with Gatsby
=================
[Get started with a template](#templates)
------------------------------------------
The easiest way to get started is to use one of the templates. All templates are configured correctly: they include [PostCSS setup](/styles/postcss-preset/)
, [ColorSchemeScript](/theming/color-schemes/)
and other essential features. Some templates also include additional features like [Jest](/guides/jest/)
, [Storybook](/guides/storybook/)
and ESLint.
If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on [this page](https://help.mantine.dev/q/templates-usage)
.
| | | |
| --- | --- | --- |
| | gatsby-template
Gatsby template with basic setup | [Use template](https://github.com/mantinedev/gatsby-template) |
[Generate new application](#generate-new-application)
------------------------------------------------------
Follow [Gatsby quick start](https://www.gatsbyjs.com/docs/quick-start/)
guide to create new Gatsby application:
yarnnpm
yarn create gatsby
Expand code
When asked "Would you like to install a styling system?", select `PostCSS`.
[Installation](#installation)
------------------------------
Choose packages that you will use in your application:
| | Package | Description |
| --- | --- | --- |
| | `@mantine/hooks` | Hooks for state and UI management |
| | `@mantine/core` | Core components library: inputs, buttons, overlays, etc. |
| | `@mantine/form` | Form management library |
| | `@mantine/dates` | Date inputs, calendars |
| | `@mantine/charts` | Recharts based charts library |
| | `@mantine/notifications` | Notifications system |
| | `@mantine/code-highlight` | Code highlight with your theme colors and styles |
| | `@mantine/tiptap` | Rich text editor based on Tiptap |
| | `@mantine/dropzone` | Capture files with drag and drop |
| | `@mantine/carousel` | Embla based carousel component |
| | `@mantine/spotlight` | Overlay command center |
| | `@mantine/modals` | Centralized modals manager |
| | `@mantine/nprogress` | Navigation progress |
Install dependencies:
yarnnpm
yarn add @mantine/core @mantine/hooks
Expand code
[PostCSS setup](#postcss-setup)
--------------------------------
Install PostCSS plugins and [postcss-preset-mantine](/styles/postcss-preset/)
:
yarnnpm
yarn add --dev postcss postcss-preset-mantine postcss-simple-vars
Expand code
Create `postcss.config.cjs` file at the root of your application with the following content:
module.exports = {
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};
[Setup](#setup)
----------------
Create `src/theme.ts` file with your theme override:
// src/theme.ts
import { createTheme } from '@mantine/core';
export const theme = createTheme({
fontFamily: 'serif',
// ... other theme override properties
});
Create `gatsby-ssr.tsx` with the following content:
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
import { theme } from './src/theme';
export const onPreRenderHTML = ({
getHeadComponents,
replaceHeadComponents,
}) => {
const headComponents = getHeadComponents();
replaceHeadComponents([\
...headComponents,\
,\
]);
};
export const wrapPageElement = ({ element }) => {
return {element};
};
Create `gatsby-browser.tsx` with the following content:
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import { MantineProvider } from '@mantine/core';
import { theme } from './src/theme';
export const wrapPageElement = ({ element }) => {
return {element};
};
All set! Start development server:
npm run develop
[CSS modules](#css-modules)
----------------------------
By default, Gatsby has different syntax for importing CSS modules:
// Default syntax – will not work in Gatsby
import classes from './Demo.module.css';
// Gatsby syntax
import * as classes from './Demo.module.css';
[Previous\
\
Usage with React Router](/guides/react-router/)
[Next\
\
Usage with Redwood](/guides/redwood/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# CSS modules | Mantine
CSS modules
===========
All Mantine components use CSS modules for styling. It is recommended to use CSS modules in your project as well, but it is not required – Mantine components are fully compatible with any third-party styling solution and native CSS.
[Usage](#usage)
----------------
CSS modules are supported out of the box by all major frameworks and build tools. Usually, all you need to do is to create `*.module.css` file:
/* Button.module.css */
.button {
color: red;
}
And then import it in your component:
import classes from './Button.module.css';
function Demo() {
return (
);
}
[How CSS modules work](#how-css-modules-work)
----------------------------------------------
When you create a `*.module.css` file, your build tool will generate a unique class name for each class in your file. For example, when you import the following file in your `.js`/`.ts` file:
/* Button.module.css */
.button {
color: red;
}
.text {
color: blue;
}
You will get an object with unique class names:
import classes from './Button.module.css';
console.log(classes);
// -> Object of scoped class names: key is a class name, value is a generated unique class name
// { button: 'button-Xh3s7ER', text: 'text-js65s3Se' }
// Note that generated class names may vary depending on your build tool
With CSS modules, you do not need to worry about class name collisions, you can use any class name you want.
[Referencing global class names](#referencing-global-class-names)
------------------------------------------------------------------
To reference global class names in CSS Modules, you can use `:global` selector:
.test {
& :global(.global-class-name) {
color: red;
}
}
The code above will compile to the following CSS:
.m-dj3w33 .global-class-name {
color: red;
}
[Adding styles to Mantine components](#adding-styles-to-mantine-components)
----------------------------------------------------------------------------
You can add styles to most of Mantine components using `className` prop – the same way as you would do with a regular HTML element. To set properties to your [theme](/theming/theme-object/)
values, you can use [Mantine CSS variables](/styles/css-variables/)
:
Box component with some styles
Demo.tsxDemo.module.css
import { Box } from '@mantine/core';
import classes from './Demo.module.css';
function Demo() {
return (
Box component with some styles
);
}
Expand code
To apply styles to inner elements of Mantine components with CSS modules, you can use `classNames` prop (see [Styles API](/styles/styles-api/)
for more information):
Floating label input
Demo.tsxDemo.module.css
import { useState } from 'react';
import { TextInput } from '@mantine/core';
import classes from './Demo.module.css';
function Demo() {
const [value, setValue] = useState('');
const [focused, setFocused] = useState(false);
const floating = focused || value.length > 0 || undefined;
return (
setFocused(true)}
onBlur={() => setFocused(false)}
value={value}
onChange={(event) => setValue(event.currentTarget.value)}
/>
);
}
Expand code
[Styling Mantine components without CSS modules](#styling-mantine-components-without-css-modules)
--------------------------------------------------------------------------------------------------
All Mantine components are fully compatible with any third-party styling solution and native CSS. There are two main strategies to apply styles with a third-party library:
* `className`, `classNames`, `style` and `styles` props
* with static selectors, for example `.mantine-Text-root`
Example of applying styles with a utility CSS library:
import { TextInput } from '@mantine/core';
function Demo() {
return (
);
}
Example of applying styles with global CSS:
/* styles.css */
/* Note that these styles are not scoped and
will be applied to all TextInput components */
.mantine-TextInput-root {
margin-top: 0.8rem;
}
.mantine-TextInput-input {
background-color: var(--mantine-color-red-filled);
color: var(--mantine-color-white);
}
You can combine both approaches to achieve desired results, for example, `@emotion/styled` and `styled-components` packages will pass `className` prop to a given component, and you can use static selectors to style inner elements:
import styled from '@emotion/styled';
import { Slider } from '@mantine/core';
const StyledSlider = styled(Slider)`
& .mantine-Slider-bar {
background-color: var(--mantine-color-pink-5);
}
& .mantine-Slider-thumb {
border-color: var(--mantine-color-pink-5);
background-color: white;
width: 1.5rem;
height: 1.5rem;
}
`;
function Demo() {
return ;
}
> **Consider using CSS modules first**
>
> CSS modules are the recommended way of styling Mantine components. Before choosing another styling solution, make sure that CSS modules do not fit your needs. Other solutions have limitations, for example:
>
> * It is hard to customize styles based on [data-\* attributes](/styles/data-attributes/)
> when using utility-based CSS libraries
> * It is impossible to style inner elements of Mantine components with static selectors when using styled-components and other similar libraries if component uses [Portal](/core/portal/)
> because some elements will be rendered outside of the component root and inner elements are not part of the component tree
[Previous\
\
CSS files list](/styles/css-files-list/)
[Next\
\
PostCSS preset](/styles/postcss-preset/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# MantineProvider | Mantine
MantineProvider
===============
`MantineProvider` provides a [theme object](/theming/theme-object/)
context value, manages color scheme changes and injects [CSS variables](/styles/css-variables/)
. It must be rendered at the root of your application and should be used only once.
[Usage](#usage)
----------------
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({
/** Your theme override here */
});
function Demo() {
return (
{/* Your app here */}
);
}
[MantineProvider props](#mantineprovider-props)
------------------------------------------------
`MantineProvider` supports the following props:
interface MantineProviderProps {
/** Theme override object */
theme?: MantineThemeOverride;
/** Used to retrieve/set color scheme value in external storage, by default uses `window.localStorage` */
colorSchemeManager?: MantineColorSchemeManager;
/** Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `light` by default */
defaultColorScheme?: MantineColorScheme;
/** Forces color scheme value, if set, MantineProvider ignores `colorSchemeManager` and `defaultColorScheme` */
forceColorScheme?: 'light' | 'dark';
/** CSS selector to which CSS variables should be added, `:root` by default */
cssVariablesSelector?: string;
/** Determines whether theme CSS variables should be added to given `cssVariablesSelector`, `true` by default */
withCssVariables?: boolean;
/** Determines whether CSS variables should be deduplicated: if CSS variable has the same value as in default theme, it is not added in the runtime. `true` by default. */
deduplicateCssVariables?: boolean;
/** Function to resolve root element to set `data-mantine-color-scheme` attribute, must return undefined on server, `() => document.documentElement` by default */
getRootElement?: () => HTMLElement | undefined;
/** A prefix for components static classes (for example {selector}-Text-root), `mantine` by default */
classNamesPrefix?: string;
/** Function to generate nonce attribute added to all generated `` tags */
getStyleNonce?: () => string;
/** Function to generate CSS variables based on theme object */
cssVariablesResolver?: CSSVariablesResolver;
/** Determines whether components should have static classes, for example, `mantine-Button-root`. `true` by default */
withStaticClasses?: boolean;
/** Determines whether global classes should be added with `` tag. Global classes are required for `hiddenFrom`/`visibleFrom` and `lightHidden`/`darkHidden` props to work. `true` by default. */
withGlobalClasses?: boolean;
/** Environment at which the provider is used, `'test'` environment disables all transitions and portals */
env?: 'default' | 'test';
/** Your application */
children?: React.ReactNode;
}
### [theme](#theme)
Pass [theme object](/theming/theme-object/)
override to `theme` prop. It will be merged with the default theme and used in all components.
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({
fontFamily: 'Open Sans, sans-serif',
primaryColor: 'cyan',
});
function Demo() {
return (
{/* Your app here */}
);
}
### [colorSchemeManager](#colorschememanager)
`colorSchemeManager` is used to retrieve and set color scheme value in external storage. By default, `MantineProvider` uses `window.localStorage` to store color scheme value, but you can pass your own implementation to `colorSchemeManager` prop. You can learn more about color scheme management in the [color schemes guide](/theming/color-schemes/)
.
import {
localStorageColorSchemeManager,
MantineProvider,
} from '@mantine/core';
const colorSchemeManager = localStorageColorSchemeManager({
key: 'my-app-color-scheme',
});
function Demo() {
return (
{/* Your app here */}
);
}
### [defaultColorScheme](#defaultcolorscheme)
`defaultColorScheme` value is used when `colorSchemeManager` cannot retrieve the value from external storage, for example during server side rendering or when the user hasn't selected a preferred color scheme. Possible values are `light`, `dark` and `auto`. By default, color scheme value is `light`. You can learn more about color scheme management in the [color schemes guide](/theming/color-schemes/)
.
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
{/* Your app here */}
);
}
### [cssVariablesSelector](#cssvariablesselector)
`cssVariablesSelector` is a CSS selector to which [CSS variables](/styles/css-variables/)
should be added. By default, it is `:root`. `MantineProvider` generates CSS variables based on given [theme override](/theming/theme-object/)
and `cssVariablesResolver`, then these variables are rendered into `` tag next to your application. You can learn more about Mantine CSS variables in the [CSS variables guide](/styles/css-variables/)
.
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
{/* Your app here */}
);
}
### [withCssVariables](#withcssvariables)
`withCssVariables` determines whether theme CSS variables should be added to given `cssVariablesSelector`. By default, it is set to `true`, you should not change it unless you want to manage CSS variables via `.css` file (Note that in this case you will need to generate all theme tokens that are not a part of the default theme on your side).
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
{/* Your app here */}
);
}
### [deduplicateCssVariables](#deduplicatecssvariables)
`deduplicateCssVariables` determines whether CSS variables should be deduplicated: if CSS variable has the same value as in default theme, it is not added in the runtime. By default, it is set to `true`. If set to `false`, all Mantine CSS variables will be added in `` tag even if they have the same value as in the default theme.
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
{/* Your app here */}
);
}
### [getRootElement](#getrootelement)
`getRootElement` is a function that returns the root application (usually `html`) element to set `data-mantine-color-scheme` attribute. Default value is `() => document.documentElement` which means that `data-mantine-color-scheme` attribute will be added to `` tag. You can learn more about color scheme management in the [color schemes guide](/theming/color-schemes/)
.
import { MantineProvider } from '@mantine/core';
const getRootElement = () =>
typeof window === 'undefined' ? undefined : document.body;
function Demo() {
return (
{/* Your app here */}
);
}
### [classNamesPrefix](#classnamesprefix)
`classNamesPrefix` is a prefix for components static classes (for example `{selector}-Text-root`). Default value is `mantine` – all components will have `mantine-` prefix in their **static classes**.
import { MantineProvider, Text } from '@mantine/core';
function Demo() {
return (
Just some text
);
}
In this case (default `classNamesPrefix`), [Text](/core/text/)
component will have the following classes:
* `mantine-focus-auto` – global utility class
* `m-3nrA4eL` – component class, usually a random string, with this class library styles are applied
* `mantine-Text-root` – component static class, part of [Styles API](/styles/styles-api/)
With `classNamesPrefix` you can change only **static class**:
import { MantineProvider, Text } from '@mantine/core';
function Demo() {
return (
Just some text
);
}
Now [Text](/core/text/)
component will have the following classes:
* `mantine-focus-auto` – `classNamesPrefix` does not impact global utility classes – it is static and **cannot be changed**
* `m-3nrA4eL` – `classNamesPrefix` does not impact library class – it is static and **cannot be changed**
* `app-Text-root` – component static class has `classNamesPrefix` instead of `mantine`
### [withStaticClasses](#withstaticclasses)
`withStaticClasses` determines whether components should have static classes, for example, `mantine-Button-root`. By default, static classes are enabled, to disable them set `withStaticClasses` to `false`:
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
{/* Your app here */}
);
}
### [withGlobalClasses](#withglobalclasses)
`withGlobalClasses` determines whether global classes should be added with `` tag. Global classes are required for `hiddenFrom`/`visibleFrom` and `lightHidden`/`darkHidden` props to work. By default, global classes are enabled, to disable them set `withGlobalClasses` to `false`. Note that disabling global classes may break styles of some components.
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
{/* Your app here */}
);
}
### [getStyleNonce](#getstylenonce)
`getStyleNonce` is a function to generate [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)
attribute added to dynamic generated `` tags.
### [cssVariablesResolver](#cssvariablesresolver)
`cssVariablesResolver` is a function to generate CSS variables styles based on the [theme object](/theming/theme-object/)
. You can learn more about Mantine CSS variables in the [CSS variables guide](/styles/css-variables/#css-variables-resolver)
.
### [env](#env)
`env` prop can be used in test environment to disable some features that might impact tests and/or make it harder to test components:
* transitions that mount/unmount child component with delay
* portals that render child component in a different part of the DOM
To enable test environment, set `env` to `test`:
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
{/* Your app here */}
);
}
Note that `env="test"` is indented to be used in test environment only with [Jest](/guides/jest/)
or [Vitest](/guides/vitest/)
, do not use it in the development or production environments. It is also not recommended to be used with end-to-end testing tools like [Cypress](/guides/cypress/)
or [Playwright](/guides/playwright/)
.
[Next\
\
Theme object](/theming/theme-object/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Polymorphic components | Mantine
Polymorphic components
======================
[What is a polymorphic component](#what-is-a-polymorphic-component)
--------------------------------------------------------------------
A polymorphic component is a component which root element can be changed with `component` prop. All polymorphic components have a default element which is used when `component` prop is not provided. For example, the [Button](/core/button/)
component default element is `button` and it can be changed to `a` or any other element or component:
[Mantine website](https://mantine.dev/)
Demo.tsx
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
[renderRoot prop](#renderroot-prop)
------------------------------------
`renderRoot` is an alternative to the `component` prop, which accepts a function that should return a React element. It is useful in cases when `component` prop cannot be used, for example, when the component that you want to pass to the `component` is generic (accepts type or infers it from props, for example ` />`).
Example of using `renderRoot` prop, the result is the same as in the previous demo:
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
**!important** It is required to spread `props` argument into the root element. Otherwise there will be no styles and the component might not be accessible.
[Polymorphic components as other React components](#polymorphic-components-as-other-react-components)
------------------------------------------------------------------------------------------------------
You can pass any other React component to `component` prop. For example, you can pass `Link` component from `react-router-dom`:
import { Link } from 'react-router-dom';
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
[Polymorphic components as Next.js Link](#polymorphic-components-as-nextjs-link)
---------------------------------------------------------------------------------
Next.js link does not work in the same way as other similar components in all Next.js versions.
With Next.js 12 and below:
import Link from 'next/link';
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
With Next.js 13 and above:
import Link from 'next/link';
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
[Polymorphic components with generic components](#polymorphic-components-with-generic-components)
--------------------------------------------------------------------------------------------------
You cannot pass generic components to `component` prop because it is not possible to infer generic types from the component prop. For example, you cannot pass [typed Next.js Link](https://nextjs.org/docs/app/building-your-application/configuring/typescript#statically-typed-links)
to `component` prop because it is not possible to infer `href` type from the component prop. The component itself will work correctly, but you will have a TypeScript error.
To make generic components work with polymorphic components, use `renderRoot` prop instead of `component`:
import Link from 'next/link';
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
[Polymorphic components with react-router NavLink](#polymorphic-components-with-react-router-navlink)
------------------------------------------------------------------------------------------------------
[react-router-dom](https://reactrouter.com/en/main)
[NavLink](https://reactrouter.com/en/main/components/nav-link)
component `className` prop accepts a function based on which you can add an active class to the link. This feature is incompatible with Mantine `component` prop, but you can use `renderRoot` prop instead:
import cx from 'clsx';
import { NavLink } from 'react-router-dom';
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
[Wrapping polymorphic components](#wrapping-polymorphic-components)
--------------------------------------------------------------------
Non-polymorphic components include `React.ComponentPropsWithoutRef<'x'>` as a part of their props type, where `x` is a root element of the component. For example, [Container](/core/container/)
component is not polymorphic – its root element is always `div`, so its props type includes `React.ComponentPropsWithoutRef<'div'>`.
Polymorphic components do not include `React.ComponentPropsWithoutRef<'x'>` as a part of their props type because their root element can be changed, and thus props type can be inferred only after the component was rendered.
Example of creating a non-polymorphic wrapper component for Mantine polymorphic component:
[Mantine website](https://mantine.dev)
Demo.tsx
import { forwardRef } from 'react';
import { Button, ButtonProps } from '@mantine/core';
interface LinkButtonProps
extends ButtonProps,
Omit, keyof ButtonProps> {}
const LinkButton = forwardRef((props, ref) => (
));
function Demo() {
return (
Mantine website
);
}
Expand code
Example of creating a polymorphic wrapper component for Mantine polymorphic component:
Button by default[Anchor by default](https://mantine.dev)
Demo.tsx
import { forwardRef } from 'react';
import { createPolymorphicComponent, Button, ButtonProps, Group } from '@mantine/core';
interface CustomButtonProps extends ButtonProps {
label: string;
}
// Default root element is 'button', but it can be changed with 'component' prop
const CustomButton = createPolymorphicComponent<'button', CustomButtonProps>(
forwardRef(({ label, ...others }, ref) => (
))
);
// Default root element is 'a', but it can be changed with 'component' prop
const CustomButtonAnchor = createPolymorphicComponent<'a', CustomButtonProps>(
forwardRef(({ label, ...others }, ref) => (
))
);
function Demo() {
return (
);
}
Expand code
[Dynamic component prop](#dynamic-component-prop)
--------------------------------------------------
You can use dynamic value in the `component` prop, but in this case, you need to either provide types manually or disable type checking by passing `any` as a type argument to the polymorphic component:
import { Box } from '@mantine/core';
function KeepTypes() {
return (
component={(Math.random() > 0.5 ? 'input' : 'div') as any}
/>
);
}
function NukeTypes() {
return (
component={Math.random() > 0.5 ? 'input' : 'div'} />
);
}
[Create your own polymorphic components](#create-your-own-polymorphic-components)
----------------------------------------------------------------------------------
Use `createPolymorphicComponent` function and [Box](/core/box/)
component to create new polymorphic components:
Button by default[MyButton as anchor](https://mantine.dev)
Demo.tsx
import { forwardRef } from 'react';
import { Box, BoxProps, createPolymorphicComponent, Group } from '@mantine/core';
interface MyButtonProps extends BoxProps {
label: string;
}
const MyButton = createPolymorphicComponent<'button', MyButtonProps>(
forwardRef(({ label, ...others }, ref) => (
{label}
))
);
function Demo() {
return (
);
}
Expand code
[Make Mantine component polymorphic](#make-mantine-component-polymorphic)
--------------------------------------------------------------------------
Polymorphic components have performance overhead for tsserver (no impact on runtime performance), because of that not all Mantine components have polymorphic types, but all components still accept `component` prop – root element can be changed.
To make Mantine component polymorphic, use `createPolymorphicComponent` function the same way as in the previous example:
import {
createPolymorphicComponent,
Group,
GroupProps,
} from '@mantine/core';
const PolymorphicGroup = createPolymorphicComponent<
'button',
GroupProps
>(Group);
function Demo() {
return (
);
}
[Previous\
\
Styles performance](/styles/styles-performance/)
[Next\
\
Icons libraries](/guides/icons/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Icons libraries | Mantine
Icons libraries with Mantine
============================
You can use any icons library with Mantine components, most popular options are:
* [Tabler icons](https://tabler-icons.io/)
* [Feather icons](https://feathericons.com/)
* [Radix icons](https://icons.radix-ui.com/)
* [react-icons](https://react-icons.github.io/react-icons/)
* [Font Awesome](https://fontawesome.com/v5/docs/web/use-with/react)
[Tabler icons](#tabler-icons)
------------------------------
[Tabler icons](https://tabler-icons.io/)
are used in Mantine demos, documentation and some `@mantine/` packages depend on them. If you do not know which icons library to use, we recommend [Tabler icons](https://tabler-icons.io/)
.
[Icons size](#icons-size)
--------------------------
Most of the icons libraries support `size` prop (or similar `width` and `height` props) which allows changing icon width and height. Usually, it is a number in pixels.
Demo.tsx
import { IconBrandMantine } from '@tabler/icons-react';
function Demo() {
return (
);
}
Expand code
> **rem units in size prop**
>
> Icons `size` prop is usually converted to `width` and `height` props under the hood. If you set `size={16}` it will be converted to `width="16"` and `height="16"` attributes on svg element.
>
> You can use rem units in `size` prop: `size="1rem"` will be converted to `width="1rem"` and `height="1rem"`, but it is not recommended as it is prohibited by SVG standard – some browsers (Firefox) will show a warning in the console.
[Custom icons](#custom-icons)
------------------------------
It is recommended to use icons as React components. In this case, you will be able to use `currentColor` in the `fill` and `stroke` prop. This will change icon color based on the context it is used in.
Demo
AddressBookIcon.tsxDemo.tsx
interface AddressBookIconProps extends React.ComponentPropsWithoutRef<'svg'> {
size?: number | string;
}
export function AddressBookIcon({ size, style, ...others }: AddressBookIconProps) {
return (
);
}
Expand code
[Previous\
\
Polymorphic components](/guides/polymorphic/)
[Next\
\
Usage with Next.js](/guides/next/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Usage with Storybook | Mantine
Setup Mantine in Storybook
==========================
Note that this guide covers only Storybook 7.0+ integration. If you are using older version of Storybook, it will not work for you.
[Add Storybook to your application](#add-storybook-to-your-application)
------------------------------------------------------------------------
If you already have Storybook in your application, you can skip this step.
Follow [Storybook getting started](https://storybook.js.org/docs/react/get-started/install/)
guide to add Storybook to your application:
npx storybook@latest init
[Configure addons](#configure-addons)
--------------------------------------
Note that `@storybook/addon-styling-webpack` is required only if you are not using Vite. **If you are using Vite, do not install `@storybook/addon-styling-webpack` and do not add it to the addons section in `main.ts` file**.
Install Storybook addons:
* [storybook-dark-mode](https://storybook.js.org/addons/storybook-dark-mode/)
* [@storybook/addon-styling-webpack](https://storybook.js.org/addons/@storybook/addon-styling-webpack)
yarnnpm
yarn add --dev storybook-dark-mode @storybook/addon-styling-webpack
Expand code
Add addons to `.storybook/main.ts`:
import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
// ... other config properties
addons: [\
// ... other addons\
'@storybook/addon-styling-webpack', // Add this line only if you are not using Vite\
'storybook-dark-mode',\
],
};
export default config;
[Theme object](#theme-object)
------------------------------
To shared [theme object](/theming/theme-object/)
between your application and Storybook, create `src/theme.ts` (or any other path in your application) file with your theme override:
// src/theme.ts
import { createTheme } from '@mantine/core';
export const theme = createTheme({
fontFamily: 'serif',
// ... other theme override properties
});
Then you will be able to use the same theme both in your application and Storybook:
// In your application
import { MantineProvider } from '@mantine/core';
import { theme } from './theme';
function App() {
return {/* ... */};
}
[Storybook preview](#storybook-preview)
----------------------------------------
If `.storybook/preview.tsx` file does not exist, create it and add the following content:
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import { useEffect } from 'react';
import { addons } from '@storybook/preview-api';
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
import {
MantineProvider,
useMantineColorScheme,
} from '@mantine/core';
// theme.ts file from previous step
import { theme } from '../src/theme';
const channel = addons.getChannel();
function ColorSchemeWrapper({
children,
}: {
children: React.ReactNode;
}) {
const { setColorScheme } = useMantineColorScheme();
const handleColorScheme = (value: boolean) =>
setColorScheme(value ? 'dark' : 'light');
useEffect(() => {
channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
}, [channel]);
return <>{children};
}
export const decorators = [\
(renderStory: any) => (\
{renderStory()}\
),\
(renderStory: any) => (\
{renderStory()}\
),\
];
All set! Start Storybook:
npm run storybook
[Previous\
\
Usage with Redwood](/guides/redwood/)
[Next\
\
Usage with TypeScript](/guides/typescript/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Theme object | Mantine
Theme object
============
Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored.
interface MantineTheme {
/** Controls focus ring styles. Supports the following options:
* - `auto` – focus ring is displayed only when the user navigates with keyboard (default value)
* - `always` – focus ring is displayed when the user navigates with keyboard and mouse
* - `never` – focus ring is always hidden (not recommended)
*/
focusRing: 'auto' | 'always' | 'never';
/** rem units scale, change if you customize font-size of `` element
* default value is `1` (for `100%`/`16px` font-size on ``)
*/
scale: number;
/** Determines whether `font-smoothing` property should be set on the body, `true` by default */
fontSmoothing: boolean;
/** White color */
white: string;
/** Black color */
black: string;
/** Object of colors, key is color name, value is an array of at least 10 strings (colors) */
colors: MantineThemeColors;
/** Index of theme.colors[color].
* Primary shade is used in all components to determine which color from theme.colors[color] should be used.
* Can be either a number (0–9) or an object to specify different color shades for light and dark color schemes.
* Default value `{ light: 6, dark: 8 }`
*
* For example,
* { primaryShade: 6 } // shade 6 is used both for dark and light color schemes
* { primaryShade: { light: 6, dark: 7 } } // different shades for dark and light color schemes
* */
primaryShade: MantineColorShade | MantinePrimaryShade;
/** Key of `theme.colors`, hex/rgb/hsl values are not supported.
* Determines which color will be used in all components by default.
* Default value – `blue`.
* */
primaryColor: string;
/** Function to resolve colors based on variant.
* Can be used to deeply customize how colors are applied to `Button`, `ActionIcon`, `ThemeIcon`
* and other components that use colors from theme.
* */
variantColorResolver: VariantColorsResolver;
/** Determines whether text color must be changed based on the given `color` prop in filled variant
* For example, if you pass `color="blue.1"` to Button component, text color will be changed to `var(--mantine-color-black)`
* Default value – `false`
* */
autoContrast: boolean;
/** Determines which luminance value is used to determine if text color should be light or dark.
* Used only if `theme.autoContrast` is set to `true`.
* Default value is `0.3`
* */
luminanceThreshold: number;
/** font-family used in all components, system fonts by default */
fontFamily: string;
/** Monospace font-family, used in code and other similar components, system fonts by default */
fontFamilyMonospace: string;
/** Controls various styles of h1-h6 elements, used in TypographyStylesProvider and Title components */
headings: {
fontFamily: string;
fontWeight: string;
textWrap: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';
sizes: {
h1: HeadingStyle;
h2: HeadingStyle;
h3: HeadingStyle;
h4: HeadingStyle;
h5: HeadingStyle;
h6: HeadingStyle;
};
};
/** Object of values that are used to set `border-radius` in all components that support it */
radius: MantineRadiusValues;
/** Key of `theme.radius` or any valid CSS value. Default `border-radius` used by most components */
defaultRadius: MantineRadius;
/** Object of values that are used to set various CSS properties that control spacing between elements */
spacing: MantineSpacingValues;
/** Object of values that are used to control `font-size` property in all components */
fontSizes: MantineFontSizesValues;
/** Object of values that are used to control `line-height` property in `Text` component */
lineHeights: MantineLineHeightValues;
/** Object of values that are used to control breakpoints in all components,
* values are expected to be defined in em
* */
breakpoints: MantineBreakpointsValues;
/** Object of values that are used to add `box-shadow` styles to components that support `shadow` prop */
shadows: MantineShadowsValues;
/** Determines whether user OS settings to reduce motion should be respected, `false` by default */
respectReducedMotion: boolean;
/** Determines which cursor type will be used for interactive elements
* - `default` – cursor that is used by native HTML elements, for example, `input[type="checkbox"]` has `cursor: default` styles
* - `pointer` – sets `cursor: pointer` on interactive elements that do not have these styles by default
*/
cursorType: 'default' | 'pointer';
/** Default gradient configuration for components that support `variant="gradient"` */
defaultGradient: MantineGradient;
/** Class added to the elements that have active styles, for example, `Button` and `ActionIcon` */
activeClassName: string;
/** Class added to the elements that have focus styles, for example, `Button` or `ActionIcon`.
* Overrides `theme.focusRing` property.
*/
focusClassName: string;
/** Allows adding `classNames`, `styles` and `defaultProps` to any component */
components: MantineThemeComponents;
/** Any other properties that you want to access with the theme objects */
other: MantineThemeOther;
}
[Usage](#usage)
----------------
To customize theme, pass theme override object to [MantineProvider](/theming/mantine-provider/)
`theme` prop. Theme override will be deeply merged with the default theme.
import { createTheme, MantineProvider, rem } from '@mantine/core';
const theme = createTheme({
colors: {
// Add your color
deepBlue: [\
'#eef3ff',\
'#dce4f5',\
'#b9c7e2',\
'#94a8d0',\
'#748dc1',\
'#5f7cb8',\
'#5474b4',\
'#44639f',\
'#39588f',\
'#2d4b81',\
],
// or replace default theme color
blue: [\
'#eef3ff',\
'#dee2f2',\
'#bdc2de',\
'#98a0ca',\
'#7a84ba',\
'#6672b0',\
'#5c68ac',\
'#4c5897',\
'#424e88',\
'#364379',\
],
},
shadows: {
md: '1px 1px 3px rgba(0, 0, 0, .25)',
xl: '5px 5px 3px rgba(0, 0, 0, .25)',
},
headings: {
fontFamily: 'Roboto, sans-serif',
sizes: {
h1: { fontSize: rem(36) },
},
},
});
function Demo() {
return (
{/* Your app here */}
);
}
[Theme properties](#theme-properties)
--------------------------------------
### [autoContrast](#autocontrast)
`autoContrast` controls whether text color should be changed based on the given `color` prop in the following components:
* [ActionIcon](/core/action-icon/)
with `variant="filled"` only
* [Alert](/core/alert/)
with `variant="filled"` only
* [Avatar](/core/avatar/)
with `variant="filled"` only
* [Badge](/core/badge/)
with `variant="filled"` only
* [Button](/core/button/)
with `variant="filled"` only
* [Chip](/core/chip/)
with `variant="filled"` only
* [NavLink](/core/nav-link/)
with `variant="filled"` only
* [ThemeIcon](/core/theme-icon/)
with `variant="filled"` only
* [Checkbox](/core/checkbox/)
with `variant="filled"` only
* [Radio](/core/radio/)
with `variant="filled"` only
* [Tabs](/core/tabs/)
with `variant="pills"` only
* [SegmentedControl](/core/segmented-control/)
* [Stepper](/core/stepper/)
* [Pagination](/core/pagination/)
* [Progress](/core/progress/)
* [Indicator](/core/indicator/)
* [Timeline](/core/timeline/)
* [Spotlight](/x/spotlight/)
* All [@mantine/dates](/dates/getting-started/)
components that are based on [Calendar](/dates/calendar/)
component
`autoContrast` checks whether the given color luminosity is above or below the `luminanceThreshold` value and changes text color to either `theme.white` or `theme.black` accordingly.
`autoContrast` can be set globally on the theme level or individually for each component via `autoContrast` prop, except for [Spotlight](/x/spotlight/)
and [@mantine/dates](/dates/getting-started/)
components which only support global theme setting.
`autoContrast: true`
Lime.4 buttonBlue.2 buttonOrange.3 button
`autoContrast: false`
Lime.4 buttonBlue.2 buttonOrange.3 button
Demo.tsx
import { Button, Code, Group } from '@mantine/core';
function Demo() {
return (
<>
autoContrast: trueautoContrast: false
);
}
Expand code
### [luminanceThreshold](#luminancethreshold)
`luminanceThreshold` controls which luminance value is used to determine if text color should be light or dark. It is used only if `theme.autoContrast` is set to `true`. Default value is `0.3`.
ButtonButtonButtonButtonButtonButtonButtonButtonButtonButton
Color
Luminance threshold
Demo.tsx
import { Button, createTheme, MantineProvider, Stack } from '@mantine/core';
const theme = createTheme({
autoContrast: true,
luminanceThreshold: 0.3,
});
function Wrapper(props: any) {
const buttons = Array(10)
.fill(0)
.map((_, index) => (
));
return (
{buttons}
);
}
Expand code
### [focusRing](#focusring)
`theme.focusRing` controls focus ring styles, it supports the following values:
* `auto` (default and recommended) – focus ring is visible only when the user navigates with keyboard, this is the default browser behavior for native interactive elements
* `always` – focus ring is visible when user navigates with keyboard and mouse, for example, the focus ring will be visible when user clicks on a button
* `never` – focus ring is always hidden, it is not recommended – users who navigate with keyboard will not have visual indication of the current focused element
Focus ring: `auto`
Button 1Button 2
Focus ring: `always`
Button 1Button 2
Focus ring: `never`
Button 1Button 2
### [focusClassName](#focusclassname)
`theme.focusClassName` is a CSS class that is added to elements that have focus styles, for example, [Button](/core/button/)
or [ActionIcon](/core/action-icon/)
. It can be used to customize focus ring styles of all interactive components except inputs. Note that when `theme.focusClassName` is set, `theme.focusRing` is ignored.
Click button to see custom focus ring
Demo.tsxfocus.module.css
import { MantineProvider, Button } from '@mantine/core';
import classes from './focus.module.css';
function Demo() {
return (
);
}
Expand code
> **:focus-visible selector**
>
> `:focus-visible` selector is supported by more than [91% of browsers](https://caniuse.com/css-focus-visible)
> (data from April 2023). Safari browsers added support for it in version 15.4 (released in March 2022). If you need to support Safari 15.3 and older, you can use [focus-visible polyfill](https://github.com/WICG/focus-visible)
> or provide a [fallback](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#providing_a_focus_fallback)
> with `:focus` pseudo-class.
### [activeClassName](#activeclassname)
`theme.activeClassName` is a CSS class that is added to elements that have active styles, for example, [Button](/core/button/)
or [ActionIcon](/core/action-icon/)
. It can be used to customize active styles of all interactive components.
Press me to see active styles
Demo.tsxactive.module.css
import { MantineProvider, Button } from '@mantine/core';
import classes from './active.module.css';
function Demo() {
return (
);
}
Expand code
To disable active styles for all components, set `theme.activeClassName` to an empty string:
No active styles
Demo.tsx
import { MantineProvider, Button } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
### [defaultRadius](#defaultradius)
`theme.defaultRadius` controls the default `border-radius` property in most components, for example, [Button](/core/button/)
or [TextInput](/core/text-input/)
. You can set to either one of the values from `theme.radius` or a number/string to use exact value. Note that numbers are treated as pixels, but converted to rem. For example, `theme.defaultRadius: 4` will be converted to `0.25rem`. You can learn more about rem conversion in the [rem units guide](/styles/rem/)
.
Button with defaultRadius
TextInput with defaultRadius
Default radius
xs
sm
md
lg
xl
Demo.tsx
import { MantineProvider, TextInput, Button } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
### [cursorType](#cursortype)
`theme.cursorType` controls the default cursor type for interactive elements, that do not have `cursor: pointer` styles by default. For example, [Checkbox](/core/checkbox/)
and [NativeSelect](/core/native-select/)
.
Default cursor
Pointer cursor
Demo.tsx
import { MantineProvider, createTheme, Checkbox } from '@mantine/core';
const theme = createTheme({
cursorType: 'pointer',
});
function Demo() {
return (
<>
);
}
Expand code
### [defaultGradient](#defaultgradient)
`theme.defaultGradient` controls the default gradient configuration for components that support `variant="gradient"` ([Button](/core/button/)
, [ActionIcon](/core/action-icon/)
, [Badge](/core/badge/)
, etc.).
Button with custom default gradient
Demo.tsx
import { MantineProvider, createTheme, Button } from '@mantine/core';
const theme = createTheme({
defaultGradient: {
from: 'orange',
to: 'red',
deg: 45,
},
});
function Demo() {
return (
);
}
Expand code
### [components](#components)
`theme.components` allows to override components [default props](/theming/default-props/)
and styles with `classNames` and `styles` properties. You can learn more about these features in [default props](/theming/default-props/)
and [Styles API](/styles/styles-api/)
guides.
### [other](#other)
`theme.other` is an object that can be used to store any other properties that you want to access with the theme objects.
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({
other: {
charcoal: '#333333',
primaryHeadingSize: 45,
fontWeights: {
bold: 700,
extraBold: 900,
},
},
});
function Demo() {
return (
{/* Your app here */}
);
}
[Store theme override object in a variable](#store-theme-override-object-in-a-variable)
----------------------------------------------------------------------------------------
To store theme override object in a variable, use `createTheme` function:
import { createTheme, MantineProvider } from '@mantine/core';
const myTheme = createTheme({
primaryColor: 'orange',
defaultRadius: 0,
});
function Demo() {
return (
{/* Your app here */}
);
}
[Merge multiple theme overrides](#merge-multiple-theme-overrides)
------------------------------------------------------------------
Use `mergeThemeOverrides` function to merge multiple themes into one theme override object:
import {
createTheme,
MantineProvider,
mergeThemeOverrides,
} from '@mantine/core';
const theme1 = createTheme({
primaryColor: 'orange',
defaultRadius: 0,
});
const theme2 = createTheme({
cursorType: 'pointer',
});
// Note: It is better to to store theme override outside of component body
// to prevent unnecessary re-renders
const myTheme = mergeThemeOverrides(theme1, theme2);
function Demo() {
return (
{/* Your app here */}
);
}
[use-mantine-theme hook](#use-mantine-theme-hook)
--------------------------------------------------
`useMantineTheme` hook returns theme object from [MantineProvider](/theming/mantine-provider/)
context:
import { useMantineTheme } from '@mantine/core';
function Demo() {
const theme = useMantineTheme();
return ;
}
[Default theme](#default-theme)
--------------------------------
You can import default theme object from `@mantine/core` package. It includes all theme properties with default values. When you pass theme override to [MantineProvider](/theming/mantine-provider/)
, it will be deeply merged with the default theme. You can find contents of `DEFAULT_THEME` object on [this page](/theming/default-theme/)
.
import { DEFAULT_THEME } from '@mantine/core';
[Access theme outside of components](#access-theme-outside-of-components)
--------------------------------------------------------------------------
To access theme outside of components, you need to create a full theme object (your theme override merged with the default theme).
// theme.ts
import {
createTheme,
DEFAULT_THEME,
mergeMantineTheme,
} from '@mantine/core';
const themeOverride = createTheme({
primaryColor: 'orange',
defaultRadius: 0,
});
export const theme = mergeMantineTheme(DEFAULT_THEME, themeOverride);
Then you will be able to import it anywhere in your application:
import { theme } from './theme';
[Previous\
\
MantineProvider](/theming/mantine-provider/)
[Next\
\
Colors](/theming/colors/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Usage with JavaScript | Mantine
Usage with JavaScript
=====================
[Is it possible to use Mantine with JavaScript?](#is-it-possible-to-use-mantine-with-javascript)
-------------------------------------------------------------------------------------------------
Yes, it is possible to use all `@mantine/*` packages (as well as all other npm packages) with JavaScript. `@mantine/*` packages are written in TypeScript and have type definitions, so you will get some the benefits of TypeScript (like autocompletion in your IDE) when using them with JavaScript.
[Transforming demos code to JavaScript](#transforming-demos-code-to-javascript)
--------------------------------------------------------------------------------
All demos in Mantine documentation are written in TypeScript. In most cases there is no difference between TypeScript and JavaScript code – you do not have to do anything.
To transform TypeScript code to JavaScript you can use [TypeScript playground](https://www.typescriptlang.org/play?jsx=1&preserveValueImports=false#code/Q)
– paste demo code into the playground and all types will be removed. Note that you will also need to remove type imports from the code.
Example of transformed code:
// TypeScript code
import { Button, ButtonProps } from '@mantine/core';
interface MyButtonProps extends ButtonProps {
myProp: string;
}
function MyButton({ myProp, ...others }: MyButtonProps) {
return ;
}
// JavaScript code
import { Button } from '@mantine/core';
function MyButton({ myProp, ...others }) {
return ;
}
[Should Mantine be used with JavaScript?](#should-mantine-be-used-with-javascript)
-----------------------------------------------------------------------------------
It is recommended to use Mantine with TypeScript, it does not require deep knowledge of TypeScript and will make your code more robust and easier to maintain. For example, you will get type errors when you pass invalid props to components or when you use non-existing props. TypeScript will also help you during migration to new versions of Mantine – you will get type errors when props/components that you have in your code are removed/renamed/changed.
If you are not familiar with TypeScript yet, using Mantine with TypeScript will be a great opportunity to learn it. You can use any of [templates](/getting-started/)
to get started – all of them include TypeScript support out of the box.
[Previous\
\
Usage with TypeScript](/guides/typescript/)
[Next\
\
Testing with Jest](/guides/jest/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# CSS variables | Mantine
Mantine CSS variables
=====================
[MantineProvider](/theming/mantine-provider/)
exposes all Mantine CSS variables based on the given [theme](/theming/theme-object/)
. You can use these variables in [CSS](/styles/css-modules/)
files, [style prop](/styles/style/)
or any other styles. Note that not all values are documented on this page, you can find full list of variables on [this page](/styles/css-variables-list/)
.
[Typography variables](#typography-variables)
----------------------------------------------
Typography variables control font family, font size, line height, font weight, and other text-related properties of all Mantine components.
### [Font family](#font-family)
The following CSS variables are used to assign font families to all Mantine components:
| Variable | Default value |
| --- | --- |
| `--mantine-font-family`
Controls font-family property of most Mantine components | system sans-serif fonts |
| `--mantine-font-family-monospace`
Controls font-family property of code blocks | system monospace fonts |
| `--mantine-font-family-headings`
Controls font-family property of headings | system sans-serif fonts |
You can control these variables in the [theme](/theming/theme-object/)
. Note that if `theme.headings.fontFamily` is not set, `--mantine-font-family-headings` value will be the same as `--mantine-font-family`.
import { createTheme } from '@mantine/core';
const theme = createTheme({
// Controls --mantine-font-family
fontFamily: 'Arial, sans-serif',
// Controls --mantine-font-family-monospace
fontFamilyMonospace: 'Courier New, monospace',
headings: {
// Controls --mantine-font-family-headings
fontFamily: 'Georgia, serif',
},
});
If you want to use system fonts as a fallback for custom fonts, you can reference `DEFAULT_THEME` value instead of defining it manually:
import { createTheme, DEFAULT_THEME } from '@mantine/core';
const theme = createTheme({
fontFamily: `Roboto, ${DEFAULT_THEME.fontFamily}`,
});
You can reference font family variables in your CSS:
.text {
font-family: var(--mantine-font-family);
}
.code {
font-family: var(--mantine-font-family-monospace);
}
.heading {
font-family: var(--mantine-font-family-headings);
}
And in [ff style prop](/styles/style-props/)
:
* `ff="text"` will use `--mantine-font-family` variable
* `ff="monospace"` will use `--mantine-font-family-monospace` variable
* `ff="heading"` will use `--mantine-font-family-headings` variable
import { Text } from '@mantine/core';
function Demo() {
return (
This text uses --mantine-font-family-monospace variable
);
}
### [Font size](#font-size)
Font size variables are used in most Mantine components to control text size. The variable that is chosen depends on the component and its `size` prop.
| Variable | Default value |
| --- | --- |
| `--mantine-font-size-xs` | 0.75rem (12px) |
| `--mantine-font-size-sm` | 0.875rem (14px) |
| `--mantine-font-size-md` | 1rem (16px) |
| `--mantine-font-size-lg` | 1.125rem (18px) |
| `--mantine-font-size-xl` | 1.25rem (20px) |
You can reference font size variables in CSS:
.demo {
font-size: var(--mantine-font-size-md);
}
And in [fz style prop](/styles/style-props/)
:
import { Text } from '@mantine/core';
function Demo() {
return (
This text uses --mantine-font-size-xl variable
);
}
To define custom font sizes, can use `theme.fontSizes` property:
import { createTheme } from '@mantine/core';
const theme = createTheme({
fontSizes: {
xs: '0.5rem',
sm: '0.75rem',
md: '1rem',
lg: '1.25rem',
xl: '1.5rem',
},
});
Note that `theme.fontSizes` object is merged with the `DEFAULT_THEME.fontSizes` – it is not required to define all values, only those that you want to change.
import { createTheme } from '@mantine/core';
// Changes only xs font size,
// other values will be taken from the DEFAULT_THEME
const theme = createTheme({
fontSizes: {
xs: '0.5rem',
},
});
You can add any number of additional font sizes to the `theme.fontSizes` object. These values will be defined as CSS variables in `--mantine-font-size-{size}` format:
import { createTheme } from '@mantine/core';
const theme = createTheme({
fontSizes: {
xxs: '0.125rem',
xxl: '2rem',
},
});
After defining `theme.fontSizes`, you can reference these variables in your CSS:
.demo {
font-size: var(--mantine-font-size-xxs);
}
> **Case conversion**
>
> Case conversion (camelCase to kebab-case) is not automatically applied to custom font sizes. If you define `theme.fontSizes` with camelCase keys, you need to reference them in camelCase format. For example, if you define `{ customSize: '1rem' }`, you need to reference it as `--mantine-font-size-customSize`.
### [Line height](#line-height)
Line height variables are used in [Text](/core/text/)
component. In other components, line-height is either calculated based on font size or set to `--mantine-line-height`, which is an alias for `--mantine-line-height-md`.
| Variable | Default value |
| --- | --- |
| `--mantine-line-height` | 1.55 |
| `--mantine-line-height-xs` | 1.4 |
| `--mantine-line-height-sm` | 1.45 |
| `--mantine-line-height-md` | 1.55 |
| `--mantine-line-height-lg` | 1.6 |
| `--mantine-line-height-xl` | 1.65 |
You can reference line height variables in your CSS:
.demo {
line-height: var(--mantine-line-height-md);
}
And in [lh style prop](/styles/style-props/)
:
import { Text } from '@mantine/core';
function Demo() {
return (
This text uses --mantine-line-height-xl variable
);
}
To define custom line heights, you can use `theme.lineHeights` property:
import { createTheme } from '@mantine/core';
const theme = createTheme({
lineHeights: {
xs: '1.2',
sm: '1.3',
md: '1.4',
lg: '1.5',
xl: '1.6',
},
});
### [Headings](#headings)
`theme.headings` controls font-size, line-height, font-weight and text-wrap CSS properties of headings in [Title](/core/title/)
and [TypographyStylesProvider](/core/typography-styles-provider/)
components.
| Variable | Default value |
| --- | --- |
| General variables | |
| `--mantine-heading-font-weight`
Controls font-weight property of all headings if not overridden | 700 |
| `--mantine-heading-text-wrap`
Controls text-wrap property of all headings | wrap |
| h1 heading | |
| `--mantine-h1-font-size` | 2.125rem (34px) |
| `--mantine-h1-line-height` | 1.3 |
| `--mantine-h1-font-weight` | 700 |
| h2 heading | |
| `--mantine-h2-font-size` | 1.625rem (26px) |
| `--mantine-h2-line-height` | 1.35 |
| `--mantine-h2-font-weight` | 700 |
| h3 heading | |
| `--mantine-h3-font-size` | 1.375rem (22px) |
| `--mantine-h3-line-height` | 1.4 |
| `--mantine-h3-font-weight` | 700 |
| h4 heading | |
| `--mantine-h4-font-size` | 1.125rem (18px) |
| `--mantine-h4-line-height` | 1.45 |
| `--mantine-h4-font-weight` | 700 |
| h5 heading | |
| `--mantine-h5-font-size` | 1rem (16px) |
| `--mantine-h5-line-height` | 1.5 |
| `--mantine-h5-font-weight` | 700 |
| h6 heading | |
| `--mantine-h6-font-size` | 0.875rem (14px) |
| `--mantine-h6-line-height` | 1.5 |
| `--mantine-h6-font-weight` | 700 |
These variables are used in [Title](/core/title/)
component, `order` prop controls which heading level to use. For example, `order={3}` Title will use:
* `--mantine-h3-font-size`
* `--mantine-h3-line-height`
* `--mantine-h3-font-weight`
This is h1 title
================
This is h2 title
----------------
### This is h3 title
#### This is h4 title
##### This is h5 title
###### This is h6 title
Demo.tsx
import { Title } from '@mantine/core';
function Demo() {
return (
<>
This is h1 titleThis is h2 titleThis is h3 titleThis is h4 titleThis is h5 titleThis is h6 title
);
}
Expand code
You can reference heading variables in your CSS:
.h1 {
font-size: var(--mantine-h1-font-size);
line-height: var(--mantine-h1-line-height);
font-weight: var(--mantine-h1-font-weight);
}
And in [fz and lh style props](/styles/style-props/)
:
import { Box } from '@mantine/core';
function Demo() {
return (
This text uses --mantine-h1-* variables
);
}
To change heading styles, can use `theme.headings` property:
import { createTheme } from '@mantine/core';
const theme = createTheme({
headings: {
sizes: {
h1: {
fontSize: '2rem',
lineHeight: '1.5',
fontWeight: '500',
},
h2: {
fontSize: '1.5rem',
lineHeight: '1.6',
fontWeight: '500',
},
},
// ...
},
});
`theme.headings` object is deeply merged with the `DEFAULT_THEME.headings` object – it is not required to define all values, only those that you want to change.
import { createTheme } from '@mantine/core';
// Changes only font-size of h1,
// other values will be taken from the DEFAULT_THEME
const theme = createTheme({
headings: {
sizes: {
h1: {
fontSize: '2rem',
},
},
},
});
### [Font smoothing](#font-smoothing)
Font smoothing variables control [\-webkit-font-smoothing and moz-osx-font-smoothing](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth)
CSS properties. These variables are used to make text look better on screens with high pixel density.
Font smoothing variables are controlled by `theme.fontSmoothing` [theme](/theming/theme-object/)
property, it is `true` by default. If `theme.fontSmoothing` is `false`, both variables will be set to `unset`.
| Variable | Default value |
| --- | --- |
| `--mantine-webkit-font-smoothing`
Controls -moz-osx-font-smoothing CSS property | grayscale |
If you need to override font smoothing values, the best way is to disable `theme.fontSmoothing` and set [global styles](/styles/global/)
on the body element:
import { createTheme } from '@mantine/core';
// Disable font smoothing in your theme
const theme = createTheme({
fontSmoothing: false,
});
// Add global styles to your project with desired font smoothing values
body {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
[Colors variables](#colors-variables)
--------------------------------------
Colors variables are controlled by `theme.colors` and `theme.primaryColor`. Each color defined in `theme.colors` object is required to have 10 shades. Theme color can be referenced by its name and shade index, for example, `--mantine-color-red-6`.
You can define new colors on the theme object or override existing colors:
import { createTheme } from '@mantine/core';
const theme = createTheme({
colors: {
demo: [\
'#FF0000',\
'#FF3333',\
'#FF6666',\
'#FF9999',\
'#FFCCCC',\
'#FFEEEE',\
'#FFFAFA',\
'#FFF5F5',\
'#FFF0F0',\
'#FFEBEB',\
],
},
});
The code above will define the following CSS variables:
| Variable | Default value |
| --- | --- |
| `--mantine-color-demo-0` | #FF0000 |
| `--mantine-color-demo-1` | #FF3333 |
| `--mantine-color-demo-2` | #FF6666 |
| `--mantine-color-demo-3` | #FF9999 |
| `--mantine-color-demo-4` | #FFCCCC |
| `--mantine-color-demo-5` | #FFEEEE |
| `--mantine-color-demo-6` | #FFFAFA |
| `--mantine-color-demo-7` | #FFF5F5 |
| `--mantine-color-demo-8` | #FFF0F0 |
| `--mantine-color-demo-9` | #FFEBEB |
### [Variant colors](#variant-colors)
Some Mantine components like [Button](/core/button/)
or [Badge](/core/badge/)
have `variant` prop that in combination with `color` prop controls the component text, background and border colors. For each variant and color, Mantine defines a set of CSS variables that control these colors. For example, for the default `blue` color the following CSS variables are defined:
| Variable | Default value |
| --- | --- |
| Filled variant | |
| `--mantine-color-blue-filled`
Background color of filled variant | var(--mantine-color-blue-6) |
| `--mantine-color-blue-filled-hover`
Background color of filled variant on hover | var(--mantine-color-blue-7) |
| Light variant | |
| `--mantine-color-blue-light`
Background color of light variant | rgba(34, 139, 230, 0.1) |
| `--mantine-color-blue-light-hover`
Background color of light variant on hover | rgba(34, 139, 230, 0.12) |
| `--mantine-color-blue-light-color`
Text color of light variant | var(--mantine-color-blue-6) |
| Outline variant | |
| `--mantine-color-blue-outline`
Border color of outline variant | var(--mantine-color-blue-6) |
| `--mantine-color-blue-outline-hover`
Border color of outline variant | rgba(34, 139, 230, 0.05) |
For example, if you use [Button](/core/button/)
component the following way:
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
The component will have the following styles:
* Background color will be `var(--mantine-color-pink-filled)`
* Background color on hover will be `var(--mantine-color-pink-filled-hover)`
* Text color will be `var(--mantine-color-white)`
* Border color will be `transparent`
Note that the variables above are not static, they are generated based on the values of `theme.colors` and `theme.primaryShade`. Additionally, their values are different for dark and light color schemes.
Variant colors variables are used in all components that support `color` prop, for example, [Button](/core/button/)
, [Badge](/core/badge/)
, [Avatar](/core/avatar/)
and [Pagination](/core/pagination/)
. Colors values that are used by these components are determined by `cssVariablesResolver` described below and [variantColorResolver](/styles/variants-sizes/#variantcolorresolver)
.
### [Primary color variables](#primary-color-variables)
Primary color variables are defined by `theme.primaryColor` (which must be a key of `theme.colors`). The following CSS variables are defined for the primary color:
| Variable | Default value |
| --- | --- |
| `--mantine-primary-color-{shade}`
Shade is 0-9 to reference specific primary color shade | var(--mantine-color-{primaryColor}-{shade}) |
| `--mantine-primary-color-filled`
Background color of filled variant | var(--mantine-color-{primaryColor}-filled) |
| `--mantine-primary-color-filled-hover`
Background color of filled variant on hover | var(--mantine-color-{primaryColor}-filled-hover) |
| `--mantine-primary-color-light`
Background color of light variant | var(--mantine-color-{primaryColor}-light) |
| `--mantine-primary-color-light-hover`
Background color of light variant on hover | var(--mantine-color-{primaryColor}-light-hover) |
| `--mantine-primary-color-light-color`
Text color of light variant | var(--mantine-color-{primaryColor}-light-color) |
You can reference primary color variables in CSS:
.demo {
color: var(--mantine-primary-color-0);
background-color: var(--mantine-primary-color-filled);
}
### [Other color variables](#other-color-variables)
The following colors are used in various Mantine components. Note that default values are provided for the light color scheme, dark color scheme values are different.
| Variable | Default value |
| --- | --- |
| `--mantine-color-white`
Value of theme.white | #fff |
| `--mantine-color-black`
Value of theme.black | #000 |
| `--mantine-color-text`
Color used for text in the body element | var(--mantine-color-black) |
| `--mantine-color-body`
Body background color | var(--mantine-color-white) |
| `--mantine-color-error`
Color used for error messages and states | var(--mantine-color-red-6) |
| `--mantine-color-placeholder`
Color used for input placeholders | var(--mantine-color-gray-5) |
| `--mantine-color-dimmed`
Color used for dimmed text | var(--mantine-color-gray-6) |
| `--mantine-color-bright`
Color used for bright text | var(--mantine-color-black) |
| `--mantine-color-anchor`
Color used for links | var(--mantine-primary-color-6) |
| `--mantine-color-default`
Background color of default variant | var(--mantine-color-white) |
| `--mantine-color-default-hover`
Background color of default variant on hover | var(--mantine-color-gray-0) |
| `--mantine-color-default-color`
Text color of default variant | var(--mantine-color-black) |
| `--mantine-color-default-border`
Border color of default variant | var(--mantine-color-gray-4) |
[Spacing variables](#spacing-variables)
----------------------------------------
`theme.spacing` values are used in most Mantine components to control paddings, margins, and other spacing-related properties. The following CSS variables are defined based on `theme.spacing`:
| Variable | Default value |
| --- | --- |
| `--mantine-spacing-xs` | 0.625rem (10px) |
| `--mantine-spacing-sm` | 0.75rem (12px) |
| `--mantine-spacing-md` | 1rem (16px) |
| `--mantine-spacing-lg` | 1.25rem (20px) |
| `--mantine-spacing-xl` | 2rem (32px) |
To define custom spacing values, use `theme.spacing` property:
import { createTheme } from '@mantine/core';
const theme = createTheme({
spacing: {
xs: '0.5rem',
sm: '0.75rem',
md: '1rem',
lg: '1.5rem',
xl: '2rem',
},
});
[Border radius variables](#border-radius-variables)
----------------------------------------------------
Mantine components that support `radius` prop use border radius variables to control border radius. The following CSS variables are defined based on `theme.radius`:
| Variable | Default value |
| --- | --- |
| `--mantine-radius-xs` | 0.125rem (2px) |
| `--mantine-radius-sm` | 0.25rem (4px) |
| `--mantine-radius-md` | 0.5rem (8px) |
| `--mantine-radius-lg` | 1rem (16px) |
| `--mantine-radius-xl` | 2rem (32px) |
Additionally, `--mantine-radius-default` variable is defined based on `theme.defaultRadius` value. If `radius` prop on components is not set explicitly, `--mantine-radius-default` is used instead.
To define custom border radius values, use `theme.radius` and `theme.defaultRadius` properties:
import { createTheme } from '@mantine/core';
const theme = createTheme({
defaultRadius: 'sm',
radius: {
xs: '0.25rem',
sm: '0.5rem',
md: '1rem',
lg: '2rem',
xl: '3rem',
},
});
[Shadow variables](#shadow-variables)
--------------------------------------
Shadow variables are used in all Mantine components that support `shadow` prop. The following CSS variables are defined based on `theme.shadows`:
| Variable | Default value |
| --- | --- |
| `--mantine-shadow-xs` | 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1) |
| `--mantine-shadow-sm` | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px |
| `--mantine-shadow-md` | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px |
| `--mantine-shadow-lg` | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 28px 23px -7px, rgba(0, 0, 0, 0.04) 0 12px 12px -7px |
| `--mantine-shadow-xl` | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 36px 28px -7px, rgba(0, 0, 0, 0.04) 0 17px 17px -7px |
To define custom shadow values, use `theme.shadows` property:
import { createTheme } from '@mantine/core';
const theme = createTheme({
shadows: {
xs: '0 1px 2px rgba(0, 0, 0, 0.1)',
sm: '0 1px 3px rgba(0, 0, 0, 0.1)',
md: '0 2px 4px rgba(0, 0, 0, 0.1)',
lg: '0 4px 8px rgba(0, 0, 0, 0.1)',
xl: '0 8px 16px rgba(0, 0, 0, 0.1)',
},
});
[z-index variables](#z-index-variables)
----------------------------------------
z-index variables are defined in `@mantine/core/styles.css`. Unlike other variables, z-index variables are not controlled by the theme and are not exposed in the theme object.
| Variable | Default value |
| --- | --- |
| `--mantine-z-index-app` | 100 |
| `--mantine-z-index-modal` | 200 |
| `--mantine-z-index-popover` | 300 |
| `--mantine-z-index-overlay` | 400 |
| `--mantine-z-index-max` | 9999 |
You can reference z-index variables in CSS:
/* Display content above the modal */
.my-content {
z-index: calc(var(--mantine-z-index-modal) + 1);
}
And in components by referencing CSS variable:
import { Modal } from '@mantine/core';
function Demo() {
return (
{}}
>
Modal content
);
}
[CSS variables resolver](#css-variables-resolver)
--------------------------------------------------
`cssVariablesResolver` prop on [MantineProvider](/theming/mantine-provider/)
allows you to modify values of Mantine CSS variables or even add your own variables. `cssVariablesResolver` is a function that accepts [theme](/theming/theme-object/)
as a single argument and returns an object with CSS variables divided into three groups:
* `variables` – variables that do not depend on color scheme
* `light` – variables for light color scheme only
* `dark` – variables for dark color scheme only
Example of adding new CSS variables based on `theme.other`:
import {
createTheme,
CSSVariablesResolver,
MantineProvider,
rem,
} from '@mantine/core';
const themeOverride = createTheme({
other: {
deepOrangeLight: '#E17900',
deepOrangeDark: '#FC8C0C',
heroHeight: rem(400),
},
});
const resolver: CSSVariablesResolver = (theme) => ({
variables: {
'--mantine-hero-height': theme.other.heroHeight,
},
light: {
'--mantine-color-deep-orange': theme.other.deepOrangeLight,
},
dark: {
'--mantine-color-deep-orange': theme.other.deepOrangeDark,
},
});
function Demo() {
return (
{/* Your app here */}
);
}
Then you will be able to use `--mantine-hero-height` and `--mantine-color-deep-orange` variables in any part of your application:
.hero {
height: var(--mantine-hero-height);
/* background color will automatically change based on color scheme */
background-color: var(--mantine-color-deep-orange);
}
[Previous\
\
Global styles](/styles/global-styles/)
[Next\
\
CSS variables list](/styles/css-variables-list/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# PostCSS preset | Mantine
Mantine PostCSS preset
======================
`postcss-preset-mantine` provides several CSS functions and mixins to help you write styles. It is not required to use it, but highly recommended. All demos that feature styles assume that you have this preset installed.
`postcss-preset-mantine` includes the following PostCSS plugins:
* [postcss-nested](https://www.npmjs.com/package/postcss-nested)
* [postcss-mixins](https://www.npmjs.com/package/postcss-mixins)
with Mantine specific mixins
* Custom plugin with `em`/`rem` functions
[Installation](#installation)
------------------------------
Install `postcss-preset-mantine` as a dev dependency:
yarnnpm
yarn add --dev postcss-preset-mantine
Expand code
[Usage](#usage)
----------------
Note that setting up PostCSS may be different depending on your build tool/framework, check a [dedicated framework guide](/getting-started/)
to learn more. Add `postcss-preset-mantine` to your `postcss.config.cjs` file (usually it is located in the root of your project):
module.exports = {
plugins: {
'postcss-preset-mantine': {},
},
};
All done! You can now use all the features of the preset.
[rem/em functions](#remem-functions)
-------------------------------------
`rem` and `em` functions can be used to convert pixels to rem/em units. `16px = 1rem` and `16px = 1em`, `em` values are supposed to be used in media queries, `rem` everywhere else. You can learn more about units conversions in [this guide](/styles/rem/)
.
.demo {
font-size: rem(16px);
@media (min-width: em(320px)) {
font-size: rem(32px);
}
}
Will be transformed to:
.demo {
font-size: calc(1rem * var(--mantine-scale));
@media (min-width: 20em) {
font-size: calc(2rem * var(--mantine-scale));
}
}
[Auto convert px to rem](#auto-convert-px-to-rem)
--------------------------------------------------
`autoRem` option can be used to automatically convert all pixel values to rem units in `.css` files:
module.exports = {
plugins: {
'postcss-preset-mantine': {
autoRem: true,
},
},
};
This option works similar to `rem` function. The following code:
.demo {
font-size: 16px;
@media (min-width: 320px) {
font-size: 32px;
}
}
Will be transformed to:
.demo {
font-size: calc(1rem * var(--mantine-scale));
@media (min-width: 320px) {
font-size: calc(2rem * var(--mantine-scale));
}
}
Note that `autoRem` converts only CSS properties, values in `@media` queries are not converted automatically – you still need to use `em` function to convert them.
`autoRem` option does not convert values in the following cases:
* Values in `calc()`, `var()`, `clamp()` and `url()` functions
* Values in `content` property
* Values that contain `rgb()`, `rgba()`, `hsl()`, `hsla()` colors
If you want to convert above values to rem units, use `rem` function manually.
[dark and light mixins](#dark-and-light-mixins)
------------------------------------------------
`dark` and `light` mixins can be used to create styles that will be applied only in dark or light color scheme.
.demo {
@mixin light {
color: red;
}
@mixin dark {
color: blue;
}
}
Will be transformed to:
[data-mantine-color-scheme='light'] .demo {
color: red;
}
[data-mantine-color-scheme='dark'] .demo {
color: blue;
}
Note that usually you do not need to use both `light` and `dark` mixins at the same time. It is easier to define styles for light color scheme and then use `dark` mixin to override them in dark color scheme.
.demo {
// Value for light color scheme
color: red;
@mixin dark {
// Value for dark color scheme
color: blue;
}
}
To define values for light/dark color scheme on the `:root`/`html` element, use `light-root` and `dark-root` mixins instead:
:root {
@mixin light-root {
--color: red;
}
@mixin dark-root {
--color: blue;
}
}
[smaller-than and larger-than mixins](#smaller-than-and-larger-than-mixins)
----------------------------------------------------------------------------
`smaller-than` and `larger-than` mixins can be used to create styles that will be applied only when the screen is smaller or larger than specified breakpoint.
.demo {
@mixin smaller-than 320px {
color: red;
}
@mixin larger-than 320px {
color: blue;
}
}
Will be transformed to:
// Breakpoint values are converted to em units
// In smaller-than mixin 0.1px is subtracted from breakpoint value
// to avoid intersection with larger-than mixin
@media (max-width: 19.99375em) {
.demo {
color: red;
}
}
@media (min-width: 20em) {
.demo {
color: blue;
}
}
You can also use `smaller-than` and `larger-than` mixins with [mantine breakpoints](/styles/responsive/#breakpoints-variables-in-css-modules)
:
.demo {
@mixin smaller-than $mantine-breakpoint-sm {
color: red;
}
@mixin larger-than $mantine-breakpoint-sm {
color: blue;
}
}
[light-dark function](#light-dark-function)
--------------------------------------------
`light-dark` function is an alternative to `light` and `dark` mixins. It accepts two arguments: first argument is rule that will be applied in light color scheme, second argument is rule that will be applied in dark color scheme.
.demo {
color: light-dark(red, blue);
}
Will be transformed to:
.demo {
color: red;
}
[data-mantine-color-scheme='dark'] .demo {
color: blue;
}
Note that `light-dark` function does not work on `:root`/`html` element. Use `light-root` and `dark-root` mixins instead:
// ❌ Does not work
:root {
--color: light-dark(red, blue);
}
// ✅ Works
:root {
@mixin light-root {
--color: red;
}
@mixin dark-root {
--color: blue;
}
}
[alpha function](#alpha-function)
----------------------------------
`alpha` function can be used to add alpha channel to color. Note that it uses [color-mix](https://caniuse.com/mdn-css_types_color_color-mix)
which is not supported in some older browsers.
.demo {
color: alpha(var(--mantine-color-red-4), 0.5);
border: 1px solid alpha(#ffc, 0.2);
}
Will be transformed to:
.demo {
color: color-mix(
in srgb,
var(--mantine-color-red-4),
transparent 50%
);
border: 1px solid color-mix(in srgb, #ffc, transparent 80%);
}
[lighten and darken functions](#lighten-and-darken-functions)
--------------------------------------------------------------
`lighten` and `darken` functions work similar to `alpha` function, but instead of adding alpha channel they add white or black color to the color with [color-mix](https://caniuse.com/mdn-css_types_color_color-mix)
.
.demo {
color: lighten(var(--mantine-color-red-4), 0.5);
border: 1px solid darken(#ffc, 0.2);
}
Will be transformed to:
.demo {
color: color-mix(in srgb, var(--mantine-color-red-4), white 50%);
border: 1px solid color-mix(in srgb, #ffc, black 20%);
}
[hover mixin](#hover-mixin)
----------------------------
`hover` mixin can be used to create styles that will be applied on hover.
.demo {
@mixin hover {
color: orange;
}
}
Will be transformed to:
@media (hover: hover) {
.demo:hover {
color: orange;
}
}
@media (hover: none) {
.demo:active {
color: orange;
}
}
[rtl/ltr mixins](#rtlltr-mixins)
---------------------------------
`rtl` mixin can be used to create styles that will be applied when `dir="rtl"` is set on parent element (usually ``).
.demo {
margin-left: 1rem;
@mixin rtl {
margin-left: 0;
margin-right: 1rem;
}
}
Will be transformed to:
.demo {
margin-left: 1rem;
}
[dir='rtl'] .demo {
margin-left: 0;
margin-right: 1rem;
}
`ltr` mixin works the same way, but for `dir="ltr"`:
.demo {
margin-left: 1rem;
@mixin ltr {
margin-left: 0;
margin-right: 1rem;
}
}
Will be transformed to:
.demo {
margin-left: 1rem;
}
[dir='ltr'] .demo {
margin-left: 0;
margin-right: 1rem;
}
[not-rtl/not-ltr mixins](#not-rtlnot-ltr-mixins)
-------------------------------------------------
`not-rtl`/`not-ltr` mixins can be used to create styles that will be applied when the direction is set to the opposite value or not set at all. For example, `not-rtl` styles will be applied when `dir="ltr"` or when `dir` is not set at all.
.demo {
@mixin not-rtl {
margin-right: 1rem;
}
}
Will be transformed to:
:root:not([dir='rtl']) .demo {
margin-right: 1rem;
}
[where-\* mixins](#where--mixins)
----------------------------------
`where-*` mixins are alternative to `light`, `dark`, `rlt` and `hover` mixins. They work exactly the same, but produced CSS is less specific. These mixins are useful when you want to easily override styles, for example, when you are building a library or extension.
Example of using `where-light` mixin:
.demo {
@mixin where-light {
color: red;
}
}
Will be transformed to:
:where([data-mantine-color-scheme='light']) .demo {
color: red;
}
[Custom mixins](#custom-mixins)
--------------------------------
You can define custom mixins that are not included in the preset by specifying them in the `mixins` option. To learn about mixins syntax, follow [postcss-mixins documentation](https://github.com/postcss/postcss-mixins#readme)
.
Example of adding `clearfix` and `circle` mixins:
module.exports = {
plugins: {
'postcss-preset-mantine': {
autoRem: true,
mixins: {
clearfix: {
'&::after': {
content: '""',
display: 'table',
clear: 'both',
},
},
circle: (_mixin, size) => ({
borderRadius: '50%',
width: size,
height: size,
}),
},
},
// ... Other plugins
},
};
Then you can use these mixins in your styles:
.demo {
@mixin clearfix;
@mixin circle 100px;
}
[Disable specific features](#disable-specific-features)
--------------------------------------------------------
You can disable specific features of the preset by setting them to `false`:
module.exports = {
'postcss-preset-mantine': {
features: {
// Turn off `light-dark` function
lightDarkFunction: false,
// Turn off `postcss-nested` plugin
nested: false,
// Turn off `lighten`, `darken` and `alpha` functions
colorMixAlpha: false,
// Turn off `rem` and `em` functions
remEmFunctions: false,
// Turn off `postcss-mixins` plugin
mixins: false,
},
},
};
[Previous\
\
CSS modules](/styles/css-modules/)
[Next\
\
Usage with Emotion](/styles/emotion/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# All releases | Mantine
All releases
============
[`7.17.0`](https://mantine.dev/changelog/7-17-0)
[Changelog](https://mantine.dev/changelog/7-17-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.17.0)
February 18, 2024
Version 7.17.0 does not have associated patch releases yet.
[`7.16.0`](https://mantine.dev/changelog/7-16-0)
[Changelog](https://mantine.dev/changelog/7-16-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.16.0)
January 14, 2025
**7.16.X** patches:
* [`7.16.1` – January 19, 2025](https://github.com/mantinedev/mantine/releases/tag/7.16.1)
* [`7.16.2` – January 26, 2025](https://github.com/mantinedev/mantine/releases/tag/7.16.2)
* [`7.16.3` – February 8, 2025](https://github.com/mantinedev/mantine/releases/tag/7.16.3)
[`7.15.0`](https://mantine.dev/changelog/7-15-0)
[Changelog](https://mantine.dev/changelog/7-15-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.15.0)
December 10, 2024
**7.15.X** patches:
* [`7.15.1` – December 12, 2024](https://github.com/mantinedev/mantine/releases/tag/7.15.1)
* [`7.15.2` – December 23, 2024](https://github.com/mantinedev/mantine/releases/tag/7.15.2)
* [`7.15.3` – January 7, 2024](https://github.com/mantinedev/mantine/releases/tag/7.15.3)
[`7.14.0`](https://mantine.dev/changelog/7-14-0)
[Changelog](https://mantine.dev/changelog/7-14-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.14.0)
November 12, 2024
**7.14.X** patches:
* [`7.14.1` – November 16, 2024](https://github.com/mantinedev/mantine/releases/tag/7.14.1)
* [`7.14.2` – November 24, 2024](https://github.com/mantinedev/mantine/releases/tag/7.14.2)
* [`7.14.3` – November 28, 2024](https://github.com/mantinedev/mantine/releases/tag/7.14.3)
[`7.13.0`](https://mantine.dev/changelog/7-13-0)
[Changelog](https://mantine.dev/changelog/7-13-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.13.0)
September 26, 2024
**7.13.X** patches:
* [`7.13.1` – September 30, 2024](https://github.com/mantinedev/mantine/releases/tag/7.13.1)
* [`7.13.2` – October 3, 2024](https://github.com/mantinedev/mantine/releases/tag/7.13.2)
* [`7.13.3` – October 17, 2024](https://github.com/mantinedev/mantine/releases/tag/7.13.3)
* [`7.13.4` – October 23, 2024](https://github.com/mantinedev/mantine/releases/tag/7.13.4)
* [`7.13.5` – November 8, 2024](https://github.com/mantinedev/mantine/releases/tag/7.13.5)
[`7.12.0`](https://mantine.dev/changelog/7-12-0)
[Changelog](https://mantine.dev/changelog/7-12-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.12.0)
August 6, 2024
**7.12.X** patches:
* [`7.11.1` – August 12, 2024](https://github.com/mantinedev/mantine/releases/tag/7.11.1)
* [`7.11.2` – August 30, 2024](https://github.com/mantinedev/mantine/releases/tag/7.11.2)
[`7.11.0`](https://mantine.dev/changelog/7-11-0)
[Changelog](https://mantine.dev/changelog/7-11-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.11.0)
June 26, 2024
**7.11.X** patches:
* [`7.11.1` – July 2, 2024](https://github.com/mantinedev/mantine/releases/tag/7.11.1)
* [`7.11.2` – July 13, 2024](https://github.com/mantinedev/mantine/releases/tag/7.11.2)
[`7.10.0`](https://mantine.dev/changelog/7-10-0)
[Changelog](https://mantine.dev/changelog/7-10-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.10.0)
May 23, 2024
**7.10.X** patches:
* [`7.10.1` – May 30, 2024](https://github.com/mantinedev/mantine/releases/tag/7.10.1)
* [`7.10.2` – June 13, 2024](https://github.com/mantinedev/mantine/releases/tag/7.10.2)
[`7.9.0`](https://mantine.dev/changelog/7-9-0)
[Changelog](https://mantine.dev/changelog/7-9-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.9.0)
May 2, 2024
**7.9.X** patches:
* [`7.9.1` – May 8, 2024](https://github.com/mantinedev/mantine/releases/tag/7.9.1)
* [`7.9.2` – May 17, 2024](https://github.com/mantinedev/mantine/releases/tag/7.9.2)
[`7.8.0`](https://mantine.dev/changelog/7-8-0)
[Changelog](https://mantine.dev/changelog/7-8-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.8.0)
April 12, 2024
**7.8.X** patches:
* [`7.8.1` – April 24, 2024](https://github.com/mantinedev/mantine/releases/tag/7.8.1)
[`7.7.0`](https://mantine.dev/changelog/7-7-0)
[Changelog](https://mantine.dev/changelog/7-7-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.7.0)
March 26, 2024
**7.7.X** patches:
* [`7.7.2` – April 11, 2024](https://github.com/mantinedev/mantine/releases/tag/7.7.2)
* [`7.7.1` – March 29, 2024](https://github.com/mantinedev/mantine/releases/tag/7.7.1)
[`7.6.0`](https://mantine.dev/changelog/7-6-0)
[Changelog](https://mantine.dev/changelog/7-6-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.6.0)
February 27, 2024
**7.6.X** patches:
* [`7.6.1` – February 28, 2024](https://github.com/mantinedev/mantine/releases/tag/7.6.1)
* [`7.6.2` – March 12, 2024](https://github.com/mantinedev/mantine/releases/tag/7.6.2)
[`7.5.0`](https://mantine.dev/changelog/7-5-0)
[Changelog](https://mantine.dev/changelog/7-5-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.5.0)
January 26, 2024
**7.5.X** patches:
* [`7.5.1` – February 2, 2024](https://github.com/mantinedev/mantine/releases/tag/7.5.1)
* [`7.5.2` – February 9, 2024](https://github.com/mantinedev/mantine/releases/tag/7.5.2)
* [`7.5.3` – February 16, 2024](https://github.com/mantinedev/mantine/releases/tag/7.5.3)
[`7.4.0`](https://mantine.dev/changelog/7-4-0)
[Changelog](https://mantine.dev/changelog/7-4-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.4.0)
January 3, 2024
**7.4.X** patches:
* [`7.4.1` – January 9, 2024](https://github.com/mantinedev/mantine/releases/tag/7.4.1)
* [`7.4.2` – January 18, 2024](https://github.com/mantinedev/mantine/releases/tag/7.4.2)
[`7.3.0`](https://mantine.dev/changelog/7-3-0)
[Changelog](https://mantine.dev/changelog/7-3-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.3.0)
December 5, 2023
**7.3.X** patches:
* [`7.3.1` – December 7, 2023](https://github.com/mantinedev/mantine/releases/tag/7.3.1)
* [`7.3.2` – December 14, 2023](https://github.com/mantinedev/mantine/releases/tag/7.3.2)
[`7.2.0`](https://mantine.dev/changelog/7-2-0)
[Changelog](https://mantine.dev/changelog/7-2-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.2.0)
November 6, 2023
**7.2.X** patches:
* [`7.2.2` – November 13, 2023](https://github.com/mantinedev/mantine/releases/tag/7.2.2)
* [`7.2.1` – November 7, 2023](https://github.com/mantinedev/mantine/releases/tag/7.2.1)
[`7.1.0`](https://mantine.dev/changelog/7-1-0)
[Changelog](https://mantine.dev/changelog/7-1-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.1.0)
September 28, 2023
**7.1.X** patches:
* [`7.1.6` – October 26, 2023](https://github.com/mantinedev/mantine/releases/tag/7.1.6)
* [`7.1.5` – October 19, 2023](https://github.com/mantinedev/mantine/releases/tag/7.1.5)
* [`7.1.3` – October 12, 2023](https://github.com/mantinedev/mantine/releases/tag/7.1.3)
* [`7.1.2` – October 2, 2023](https://github.com/mantinedev/mantine/releases/tag/7.1.2)
* [`7.1.1` – October 2, 2023](https://github.com/mantinedev/mantine/releases/tag/7.1.1)
[`7.0.0`](https://mantine.dev/changelog/7-0-0)
[Changelog](https://mantine.dev/changelog/7-0-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/7.0.0)
September 18, 2023
**7.0.X** patches:
* [`7.0.2` – September 26, 2023](https://github.com/mantinedev/mantine/releases/tag/7.0.2)
* [`7.0.1` – September 25, 2023](https://github.com/mantinedev/mantine/releases/tag/7.0.1)
[`6.0.0`](https://v6.mantine.dev/changelog/6-0-0)
[Changelog](https://v6.mantine.dev/changelog/6-0-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/6.0.0)
March 2, 2023
**6.0.X** patches:
* [`6.0.21` – September 17, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.21)
* [`6.0.19` – August 10, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.19)
* [`6.0.18` – August 7, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.18)
* [`6.0.17` – July 18, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.17)
* [`6.0.16` – July 4, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.16)
* [`6.0.15` – June 27, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.15)
* [`6.0.14` – June 20, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.14)
* [`6.0.13` – May 30, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.13)
* [`6.0.11` – May 16, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.11)
* [`6.0.9` – April 25, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.9)
* [`6.0.8` – April 18, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.8)
* [`6.0.7` – April 11, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.7)
* [`6.0.6` – April 4, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.6)
* [`6.0.5` – March 28, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.5)
* [`6.0.3` – March 21, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.3)
* [`6.0.2` – March 14, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.2)
* [`6.0.1` – March 8, 2023](https://github.com/mantinedev/mantine/releases/tag/6.0.1)
[`5.10.0`](https://v5.mantine.dev/changelog/5-10-0)
[Changelog](https://v5.mantine.dev/changelog/5-10-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/5.10.0)
January 3, 2023
**5.10.X** patches:
* [`5.10.5` – February 26, 2023](https://github.com/mantinedev/mantine/releases/tag/5.10.5)
* [`5.10.4` – February 15, 2023](https://github.com/mantinedev/mantine/releases/tag/5.10.4)
* [`5.10.3` – February 3, 2023](https://github.com/mantinedev/mantine/releases/tag/5.10.3)
* [`5.10.2` – January 25, 2023](https://github.com/mantinedev/mantine/releases/tag/5.10.2)
* [`5.10.1` – January 17, 2023](https://github.com/mantinedev/mantine/releases/tag/5.10.1)
[`5.9.0`](https://v5.mantine.dev/changelog/5-9-0)
[Changelog](https://v5.mantine.dev/changelog/5-9-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/5.9.0)
December 1, 2022
**5.9.X** patches:
* [`5.9.6` – December 31, 2022](https://github.com/mantinedev/mantine/releases/tag/5.9.6)
* [`5.9.5` – December 17, 2022](https://github.com/mantinedev/mantine/releases/tag/5.9.5)
* [`5.9.4` – December 12, 2022](https://github.com/mantinedev/mantine/releases/tag/5.9.4)
* [`5.9.3` – December 10, 2022](https://github.com/mantinedev/mantine/releases/tag/5.9.3)
* [`5.9.2` – December 5, 2022](https://github.com/mantinedev/mantine/releases/tag/5.9.2)
* [`5.9.1` – December 4, 2022](https://github.com/mantinedev/mantine/releases/tag/5.9.1)
[`5.8.0`](https://v5.mantine.dev/changelog/5-8-0)
[Changelog](https://v5.mantine.dev/changelog/5-8-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/5.8.0)
November 16, 2022
**5.8.X** patches:
* [`5.8.4` – November 28, 2022](https://github.com/mantinedev/mantine/releases/tag/5.8.4)
* [`5.8.3` – November 23, 2022](https://github.com/mantinedev/mantine/releases/tag/5.8.3)
* [`5.8.2` – November 19, 2022](https://github.com/mantinedev/mantine/releases/tag/5.8.2)
[`5.7.0`](https://v5.mantine.dev/changelog/5-7-0)
[Changelog](https://v5.mantine.dev/changelog/5-7-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/5.7.0)
November 4, 2022
**5.7.X** patches:
* [`5.7.2` – November 12, 2022](https://github.com/mantinedev/mantine/releases/tag/5.7.2)
* [`5.7.1` – November 6, 2022](https://github.com/mantinedev/mantine/releases/tag/5.7.1)
[`5.6.0`](https://v5.mantine.dev/changelog/5-6-0)
[Changelog](https://v5.mantine.dev/changelog/5-6-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/5.6.0)
October 20, 2022
**5.6.X** patches:
* [`5.6.4` – November 2, 2022](https://github.com/mantinedev/mantine/releases/tag/5.6.4)
* [`5.6.3` – October 27, 2022](https://github.com/mantinedev/mantine/releases/tag/5.6.3)
* [`5.6.2` – October 24, 2022](https://github.com/mantinedev/mantine/releases/tag/5.6.2)
* [`5.6.1` – October 22, 2022](https://github.com/mantinedev/mantine/releases/tag/5.6.1)
[`5.5.0`](https://v5.mantine.dev/changelog/5-5-0)
[Changelog](https://v5.mantine.dev/changelog/5-5-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/5.5.0)
October 2, 2022
**5.5.X** patches:
* [`5.5.6` – October 18, 2022](https://github.com/mantinedev/mantine/releases/tag/5.5.6)
* [`5.5.5` – October 11, 2022](https://github.com/mantinedev/mantine/releases/tag/5.5.5)
* [`5.5.4` – October 5, 2022](https://github.com/mantinedev/mantine/releases/tag/5.5.4)
* [`5.5.2` – October 4, 2022](https://github.com/mantinedev/mantine/releases/tag/5.5.2)
* [`5.5.1` – October 3, 2022](https://github.com/mantinedev/mantine/releases/tag/5.5.1)
[`5.4.0`](https://v5.mantine.dev/changelog/5-4-0)
[Changelog](https://v5.mantine.dev/changelog/5-4-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/5.4.0)
September 19, 2022
**5.4.X** patches:
* [`5.4.2` – September 29, 2022](https://github.com/mantinedev/mantine/releases/tag/5.4.2)
* [`5.4.1` – September 24, 2022](https://github.com/mantinedev/mantine/releases/tag/5.4.1)
[`5.3.0`](https://v5.mantine.dev/changelog/5-3-0)
[Changelog](https://v5.mantine.dev/changelog/5-3-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/5.3.0)
September 9, 2022
**5.3.X** patches:
* [`5.3.3` – September 17, 2022](https://github.com/mantinedev/mantine/releases/tag/5.3.3)
* [`5.3.2` – September 15, 2022](https://github.com/mantinedev/mantine/releases/tag/5.3.2)
* [`5.3.1` – September 14, 2022](https://github.com/mantinedev/mantine/releases/tag/5.3.1)
[`5.2.0`](https://v5.mantine.dev/changelog/5-2-0)
[Changelog](https://v5.mantine.dev/changelog/5-2-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/5.2.0)
August 18, 2022
**5.2.X** patches:
* [`5.2.7` – September 8, 2022](https://github.com/mantinedev/mantine/releases/tag/5.2.7)
* [`5.2.6` – September 6, 2022](https://github.com/mantinedev/mantine/releases/tag/5.2.6)
* [`5.2.5` – September 3, 2022](https://github.com/mantinedev/mantine/releases/tag/5.2.5)
* [`5.2.4` – August 27, 2022](https://github.com/mantinedev/mantine/releases/tag/5.2.4)
* [`5.2.3` – August 22, 2022](https://github.com/mantinedev/mantine/releases/tag/5.2.3)
* [`5.2.2` – August 22, 2022](https://github.com/mantinedev/mantine/releases/tag/5.2.2)
[`5.1.0`](https://v5.mantine.dev/changelog/5-1-0)
[Changelog](https://v5.mantine.dev/changelog/5-1-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/5.1.0)
August 8, 2022
**5.1.X** patches:
* [`5.1.7` – August 18, 2022](https://github.com/mantinedev/mantine/releases/tag/5.1.7)
* [`5.1.6` – August 14, 2022](https://github.com/mantinedev/mantine/releases/tag/5.1.6)
* [`5.1.5` – August 13, 2022](https://github.com/mantinedev/mantine/releases/tag/5.1.5)
* [`5.1.4` – August 12, 2022](https://github.com/mantinedev/mantine/releases/tag/5.1.4)
* [`5.1.3` – August 11, 2022](https://github.com/mantinedev/mantine/releases/tag/5.1.3)
* [`5.1.1` – August 9, 2022](https://github.com/mantinedev/mantine/releases/tag/5.1.1)
[`5.0.0`](https://v5.mantine.dev/changelog/5-0-0)
[Changelog](https://v5.mantine.dev/changelog/5-0-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/5.0.0)
July 25, 2022
**5.0.X** patches:
* [`5.0.3` – August 5, 2022](https://github.com/mantinedev/mantine/releases/tag/5.0.3)
* [`5.0.2` – July 30, 2022](https://github.com/mantinedev/mantine/releases/tag/5.0.2)
[`4.2.0`](https://v4.mantine.dev/changelog/4-2-0)
[Changelog](https://v4.mantine.dev/changelog/4-2-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/4.2.0)
April 27, 2022
**4.2.X** patches:
* [`4.2.12` – July 3, 2022](https://github.com/mantinedev/mantine/releases/tag/4.2.12)
* [`4.2.11` – June 26, 2022](https://github.com/mantinedev/mantine/releases/tag/4.2.11)
* [`4.2.9` – June 12, 2022](https://github.com/mantinedev/mantine/releases/tag/4.2.9)
* [`4.2.8` – June 5, 2022](https://github.com/mantinedev/mantine/releases/tag/4.2.8)
* [`4.2.7` – May 29, 2022](https://github.com/mantinedev/mantine/releases/tag/4.2.7)
* [`4.2.6` – May 22, 2022](https://github.com/mantinedev/mantine/releases/tag/4.2.6)
* [`4.2.5` – May 15, 2022](https://github.com/mantinedev/mantine/releases/tag/4.2.5)
* [`4.2.3` – May 8, 2022](https://github.com/mantinedev/mantine/releases/tag/4.2.3)
* [`4.2.2` – May 1, 2022](https://github.com/mantinedev/mantine/releases/tag/4.2.2)
[`4.1.0`](https://v4.mantine.dev/changelog/4-1-0)
[Changelog](https://v4.mantine.dev/changelog/4-1-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/4.1.0)
March 28, 2022
**4.1.X** patches:
* [`4.1.5` – April 24, 2022](https://github.com/mantinedev/mantine/releases/tag/4.1.5)
* [`4.1.4` – April 17, 2022](https://github.com/mantinedev/mantine/releases/tag/4.1.4)
* [`4.1.3` – April 9, 2022](https://github.com/mantinedev/mantine/releases/tag/4.1.3)
* [`4.1.2` – April 3, 2022](https://github.com/mantinedev/mantine/releases/tag/4.1.2)
* [`4.1.1` – April 1, 2022](https://github.com/mantinedev/mantine/releases/tag/4.1.1)
[`4.0.0`](https://v4.mantine.dev/changelog/4-0-0)
[Changelog](https://v4.mantine.dev/changelog/4-0-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/4.0.0)
March 10, 2022
**4.0.X** patches:
* [`4.0.9` – March 27, 2022](https://github.com/mantinedev/mantine/releases/tag/4.0.9)
* [`4.0.8` – March 24, 2022](https://github.com/mantinedev/mantine/releases/tag/4.0.8)
* [`4.0.7` – March 20, 2022](https://github.com/mantinedev/mantine/releases/tag/4.0.7)
* [`4.0.6` – March 18, 2022](https://github.com/mantinedev/mantine/releases/tag/4.0.6)
* [`4.0.5` – March 16, 2022](https://github.com/mantinedev/mantine/releases/tag/4.0.5)
* [`4.0.4` – March 13, 2022](https://github.com/mantinedev/mantine/releases/tag/4.0.4)
* [`4.0.3` – March 13, 2022](https://github.com/mantinedev/mantine/releases/tag/4.0.3)
* [`4.0.2` – March 12, 2022](https://github.com/mantinedev/mantine/releases/tag/4.0.2)
* [`4.0.1` – March 11, 2022](https://github.com/mantinedev/mantine/releases/tag/4.0.1)
[`3.6.0`](https://v3.mantine.dev/changelog/3-6-0)
[Changelog](https://v3.mantine.dev/changelog/3-6-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/3.6.0)
January 14, 2022
**3.6.X** patches:
* [`3.6.14` – March 3, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.14)
* [`3.6.13` – March 2, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.13)
* [`3.6.12` – March 1, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.12)
* [`3.6.11` – February 25, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.11)
* [`3.6.9` – February 17, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.9)
* [`3.6.8` – February 16, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.8)
* [`3.6.7` – February 9, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.7)
* [`3.6.6` – February 5, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.6)
* [`3.6.5` – February 2, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.5)
* [`3.6.4` – January 30, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.4)
* [`3.6.3` – January 25, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.3)
* [`3.6.2` – January 20, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.2)
* [`3.6.1` – January 17, 2022](https://github.com/mantinedev/mantine/releases/tag/3.6.1)
[`3.5.0`](https://v3.mantine.dev/changelog/3-5-0)
[Changelog](https://v3.mantine.dev/changelog/3-5-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/3.5.0)
January 3, 2022
**3.5.X** patches:
* [`3.5.5` – January 12, 2022](https://github.com/mantinedev/mantine/releases/tag/3.5.5)
* [`3.5.4` – January 9, 2022](https://github.com/mantinedev/mantine/releases/tag/3.5.4)
* [`3.5.3` – January 8, 2022](https://github.com/mantinedev/mantine/releases/tag/3.5.3)
* [`3.5.2` – January 7, 2022](https://github.com/mantinedev/mantine/releases/tag/3.5.2)
* [`3.5.1` – January 6, 2022](https://github.com/mantinedev/mantine/releases/tag/3.5.1)
[`3.4.0`](https://v3.mantine.dev/changelog/3-4-0)
[Changelog](https://v3.mantine.dev/changelog/3-4-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/3.4.0)
December 14, 2021
**3.4.X** patches:
* [`3.4.3` – December 20, 2021](https://github.com/mantinedev/mantine/releases/tag/3.4.3)
* [`3.4.2` – December 18, 2021](https://github.com/mantinedev/mantine/releases/tag/3.4.2)
* [`3.4.1` – December 16, 2021](https://github.com/mantinedev/mantine/releases/tag/3.4.1)
[`3.3.0`](https://v3.mantine.dev/changelog/3-3-0)
[Changelog](https://v3.mantine.dev/changelog/3-3-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/3.3.0)
December 2, 2021
**3.3.X** patches:
* [`3.3.5` – December 7, 2021](https://github.com/mantinedev/mantine/releases/tag/3.3.5)
* [`3.3.4` – December 6, 2021](https://github.com/mantinedev/mantine/releases/tag/3.3.4)
* [`3.3.3` – December 6, 2021](https://github.com/mantinedev/mantine/releases/tag/3.3.3)
* [`3.3.2` – December 4, 2021](https://github.com/mantinedev/mantine/releases/tag/3.3.2)
* [`3.3.1` – December 3, 2021](https://github.com/mantinedev/mantine/releases/tag/3.3.1)
[`3.2.0`](https://v3.mantine.dev/changelog/3-2-0)
[Changelog](https://v3.mantine.dev/changelog/3-2-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/3.2.0)
November 13, 2021
**3.2.X** patches:
* [`3.2.3` – November 26, 2021](https://github.com/mantinedev/mantine/releases/tag/3.2.3)
* [`3.2.2` – November 22, 2021](https://github.com/mantinedev/mantine/releases/tag/3.2.2)
* [`3.2.1` – November 19, 2021](https://github.com/mantinedev/mantine/releases/tag/3.2.1)
[`3.1.0`](https://v3.mantine.dev/changelog/3-1-0)
[Changelog](https://v3.mantine.dev/changelog/3-1-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/3.1.0)
October 28, 2021
**3.1.X** patches:
* [`3.1.9` – November 13, 2021](https://github.com/mantinedev/mantine/releases/tag/3.1.9)
* [`3.1.8` – November 10, 2021](https://github.com/mantinedev/mantine/releases/tag/3.1.8)
* [`3.1.7` – November 8, 2021](https://github.com/mantinedev/mantine/releases/tag/3.1.7)
* [`3.1.6` – November 5, 2021](https://github.com/mantinedev/mantine/releases/tag/3.1.6)
* [`3.1.5` – November 5, 2021](https://github.com/mantinedev/mantine/releases/tag/3.1.5)
* [`3.1.4` – November 3, 2021](https://github.com/mantinedev/mantine/releases/tag/3.1.4)
* [`3.1.3` – November 2, 2021](https://github.com/mantinedev/mantine/releases/tag/3.1.3)
* [`3.1.2` – November 1, 2021](https://github.com/mantinedev/mantine/releases/tag/3.1.2)
* [`3.1.1` – November 1, 2021](https://github.com/mantinedev/mantine/releases/tag/3.1.1)
[`3.0.0`](https://v3.mantine.dev/changelog/3-0-0)
[Changelog](https://v3.mantine.dev/changelog/3-0-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/3.0.0)
October 10, 2021
**3.0.X** patches:
* [`3.0.5` – October 16, 2021](https://github.com/mantinedev/mantine/releases/tag/3.0.5)
* [`3.0.4` – October 14, 2021](https://github.com/mantinedev/mantine/releases/tag/3.0.4)
* [`3.0.3` – October 13, 2021](https://github.com/mantinedev/mantine/releases/tag/3.0.3)
* [`3.0.2` – October 12, 2021](https://github.com/mantinedev/mantine/releases/tag/3.0.2)
* [`3.0.1` – October 11, 2021](https://github.com/mantinedev/mantine/releases/tag/3.0.1)
[`2.5.0`](https://v2.mantine.dev/changelog/2-5-0)
[Changelog](https://v2.mantine.dev/changelog/2-5-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/2.5.0)
September 16, 2021
**2.5.X** patches:
* [`2.5.1` – September 17, 2021](https://github.com/mantinedev/mantine/releases/tag/2.5.1)
[`2.4.0`](https://v2.mantine.dev/changelog/2-4-0)
[Changelog](https://v2.mantine.dev/changelog/2-4-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/2.4.0)
August 24, 2021
**2.4.X** patches:
* [`2.4.3` – September 5, 2021](https://github.com/mantinedev/mantine/releases/tag/2.4.3)
* [`2.4.2` – September 5, 2021](https://github.com/mantinedev/mantine/releases/tag/2.4.2)
* [`2.4.1` – September 1, 2021](https://github.com/mantinedev/mantine/releases/tag/2.4.1)
[`2.3.0`](https://v2.mantine.dev/changelog/2-3-0)
[Changelog](https://v2.mantine.dev/changelog/2-3-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/2.3.0)
August 15, 2021
**2.3.X** patches:
* [`2.3.2` – August 24, 2021](https://github.com/mantinedev/mantine/releases/tag/2.3.2)
* [`2.3.1` – August 19, 2021](https://github.com/mantinedev/mantine/releases/tag/2.3.1)
[`2.2.0`](https://v2.mantine.dev/changelog/2-2-0)
[Changelog](https://v2.mantine.dev/changelog/2-2-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/2.2.0)
August 2, 2021
**2.2.X** patches:
* [`2.2.3` – August 15, 2021](https://github.com/mantinedev/mantine/releases/tag/2.2.3)
* [`2.2.2` – August 12, 2021](https://github.com/mantinedev/mantine/releases/tag/2.2.2)
* [`2.2.1` – August 4, 2021](https://github.com/mantinedev/mantine/releases/tag/2.2.1)
[`2.1.0`](https://v2.mantine.dev/changelog/2-1-0)
[Changelog](https://v2.mantine.dev/changelog/2-1-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/2.1.0)
July 20, 2021
**2.1.X** patches:
* [`2.1.5` – July 30, 2021](https://github.com/mantinedev/mantine/releases/tag/2.1.5)
* [`2.1.4` – July 27, 2021](https://github.com/mantinedev/mantine/releases/tag/2.1.4)
* [`2.1.3` – July 26, 2021](https://github.com/mantinedev/mantine/releases/tag/2.1.3)
* [`2.1.2` – July 24, 2021](https://github.com/mantinedev/mantine/releases/tag/2.1.2)
* [`2.1.1` – July 21, 2021](https://github.com/mantinedev/mantine/releases/tag/2.1.1)
[`2.0.0`](https://v2.mantine.dev/changelog/2-0-0)
[Changelog](https://v2.mantine.dev/changelog/2-0-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/2.0.0)
July 5, 2021
**2.0.X** patches:
* [`2.0.7` – July 18, 2021](https://github.com/mantinedev/mantine/releases/tag/2.0.7)
* [`2.0.6` – July 16, 2021](https://github.com/mantinedev/mantine/releases/tag/2.0.6)
* [`2.0.5` – July 14, 2021](https://github.com/mantinedev/mantine/releases/tag/2.0.5)
* [`2.0.4` – July 13, 2021](https://github.com/mantinedev/mantine/releases/tag/2.0.4)
* [`2.0.3` – July 11, 2021](https://github.com/mantinedev/mantine/releases/tag/2.0.3)
* [`2.0.2` – July 6, 2021](https://github.com/mantinedev/mantine/releases/tag/2.0.2)
[`1.3.0`](https://v2.mantine.dev/changelog/1-3-0)
[Changelog](https://v2.mantine.dev/changelog/1-3-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/1.3.0)
June 1, 2021
**1.3.X** patches:
* [`1.3.1` – June 2, 2021](https://github.com/mantinedev/mantine/releases/tag/1.3.1)
[`1.1.0`](https://v2.mantine.dev/changelog/1-1-0)
[Changelog](https://v2.mantine.dev/changelog/1-1-0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/1.1.0)
May 19, 2021
**1.1.X** patches:
* [`1.1.1` – May 20, 2021](https://github.com/mantinedev/mantine/releases/tag/1.1.1)
[`1.0.0`](https://github.com/mantinedev/mantine/releases/tag/1.0.0)
[GitHub release](https://github.com/mantinedev/mantine/releases/tag/1.0.0)
May 3, 2021
**1.0.X** patches:
* [`1.0.6` – May 9, 2021](https://github.com/mantinedev/mantine/releases/tag/1.0.6)
* [`1.0.5` – May 8, 2021](https://github.com/mantinedev/mantine/releases/tag/1.0.5)
* [`1.0.4` – May 8, 2021](https://github.com/mantinedev/mantine/releases/tag/1.0.4)
* [`1.0.3` – May 5, 2021](https://github.com/mantinedev/mantine/releases/tag/1.0.3)
* [`1.0.2` – May 5, 2021](https://github.com/mantinedev/mantine/releases/tag/1.0.2)
[Next\
\
MantineProvider](/theming/mantine-provider/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Color schemes | Mantine
Color schemes
=============
[MantineProvider](/theming/mantine-provider/)
manages color scheme context in your application. You can configure the default color scheme value with `defaultColorScheme` prop, possible values are `light`, `dark` and `auto` (system color scheme is used). The default value is `light`.
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
{/* Your app here */}
);
}
[data-mantine-color-scheme attribute](#data-mantine-color-scheme-attribute)
----------------------------------------------------------------------------
When [MantineProvider](/theming/mantine-provider/)
is mounted, it sets `data-mantine-color-scheme` attribute on `` element to the value that the user has selected previously or to the value of `defaultColorScheme` prop. `data-mantine-color-scheme` attribute is used in all components styles to determine which colors should component use.
[use-mantine-color-scheme hook](#use-mantine-color-scheme-hook)
----------------------------------------------------------------
`useMantineColorScheme` hook can be used to get and set current color scheme value:
function useMantineColorScheme(): {
/** Current color scheme value */
colorScheme: 'dark' | 'light' | 'auto';
/** Sets colors scheme to given value */
setColorScheme: (colorScheme: 'dark' | 'light' | 'auto') => void;
/** Toggle color scheme to the opposite value, if value is 'auto', color scheme is inferred from the OS settings */
toggleColorScheme: () => void;
/** Clears color scheme value from storage and sets it to `defaultColorScheme` */
clearColorScheme: () => void;
};
LightDarkAutoClear
Demo.tsx
import { useMantineColorScheme, Button, Group } from '@mantine/core';
function Demo() {
const { setColorScheme, clearColorScheme } = useMantineColorScheme();
return (
);
}
Expand code
[use-computed-color-scheme hook](#use-computed-color-scheme-hook)
------------------------------------------------------------------
`useComputedColorScheme` returns a computed color scheme value, it returns either `light` or `dark`. It can be used to implement color scheme toggle logic:
import {
useComputedColorScheme,
useMantineColorScheme,
} from '@mantine/core';
function Demo() {
// -> colorScheme is 'auto' | 'light' | 'dark'
const { colorScheme, setColorScheme } = useMantineColorScheme();
// -> computedColorScheme is 'light' | 'dark', argument is the default value
const computedColorScheme = useComputedColorScheme('light');
// Incorrect color scheme toggle implementation
// If colorScheme is 'auto', then it is not possible to
// change color scheme correctly in all cases:
// 'auto' can mean both light and dark
const toggleColorScheme = () => {
setColorScheme(colorScheme === 'dark' ? 'light' : 'dark');
};
// Correct color scheme toggle implementation
// computedColorScheme is always either 'light' or 'dark'
const toggleColorScheme = () => {
setColorScheme(computedColorScheme === 'dark' ? 'light' : 'dark');
};
}
[Transitions during color scheme change](#transitions-during-color-scheme-change)
----------------------------------------------------------------------------------
By default, transitions on all elements are disabled when color scheme changes to avoid inconsistent animations. To enable transitions during color scheme change, set `keepTransitions: true` option on `useMantineColorScheme` hook:
import { useMantineColorScheme } from '@mantine/core';
function Demo() {
const { colorScheme, setColorScheme } = useMantineColorScheme({
keepTransitions: true,
});
}
[Color scheme value caveats](#color-scheme-value-caveats)
----------------------------------------------------------
By default, the color scheme value is stored in local storage, and its value is saved in state before the component is mounted to avoid flash of inaccurate color scheme. This means that color scheme value can be different on client and server, as server does not have access to local storage and always uses the default value.
If you have server side rendering in your application (for example, if you use [Next.js](/guides/next/)
or [React Router](/guides/react-router/)
), then you cannot use `colorScheme` value in your application to avoid hydration issues. Instead, you can use `dark` and `light` mixins from [postcss-preset-mantine](/styles/postcss-preset/)
to generate styles that will hide elements based on color scheme value:
Demo.tsxDemo.module.css
import { ActionIcon, useMantineColorScheme, useComputedColorScheme } from '@mantine/core';
import { IconSun, IconMoon } from '@tabler/icons-react';
import cx from 'clsx';
import classes from './Demo.module.css';
function Demo() {
const { setColorScheme } = useMantineColorScheme();
const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
return (
setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')}
variant="default"
size="xl"
aria-label="Toggle color scheme"
>
);
}
Expand code
> **colorScheme for client only applications**
>
> You can safely use `colorScheme` value in client only applications (for example, Vite or create-react-app applications). In this case, there is no hydration, and thus hydration error cannot occur.
[ColorSchemeScript](#colorschemescript)
----------------------------------------
`ColorSchemeScript` component renders script tag that sets `data-mantine-color-scheme` attribute on `` element to user selected value or to `defaultColorScheme` prop value before hydration. It is used to avoid flash of inaccurate color scheme in server side rendered applications, for example [Next.js](/guides/next/)
or [Remix](/guides/remix/)
. Follows framework specific guides to learn where to render `ColorSchemeScript` component.
You can add any additional props to the `` tag generated by `ColorSchemeScript` component, for example, you can add [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)
attribute:
import { ColorSchemeScript } from '@mantine/core';
function Demo() {
return (
);
}
[Auto color scheme](#auto-color-scheme)
----------------------------------------
Set `defaultColorScheme="auto"` on `MantineProvider` and `ColorSchemeScript` to use system color scheme. In this case color scheme value will be controlled by the user OS:
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
function Demo() {
return (
<>
{/* Your app here */}
);
}
[Color scheme manager](#color-scheme-manager)
----------------------------------------------
By default, color scheme value is stored in local storage, but you can implement your own color scheme manager to store the value in any other external storage.
Color scheme manager must have the following methods:
interface MantineColorSchemeManager {
/** Function to retrieve color scheme value from external storage, for example window.localStorage */
get: (defaultValue: MantineColorScheme) => MantineColorScheme;
/** Function to set color scheme value in external storage, for example window.localStorage */
set: (value: MantineColorScheme) => void;
/** Function to subscribe to color scheme changes triggered by external events */
subscribe: (
onUpdate: (colorScheme: MantineColorScheme) => void
) => void;
/** Function to unsubscribe from color scheme changes triggered by external events */
unsubscribe: () => void;
/** Function to clear value from external storage */
clear: () => void;
}
Usually, it is better to wrap color scheme manager in a creator function to provide a way to configure it. Default local storage based color scheme manager example:
import {
isMantineColorScheme,
MantineColorScheme,
MantineColorSchemeManager,
} from '@mantine/core';
export interface LocalStorageColorSchemeManagerOptions {
/** Local storage key used to retrieve value with `localStorage.getItem(key)`, `mantine-color-scheme` by default */
key?: string;
}
export function localStorageColorSchemeManager({
key = 'mantine-color-scheme',
}: LocalStorageColorSchemeManagerOptions = {}): MantineColorSchemeManager {
let handleStorageEvent: (event: StorageEvent) => void;
return {
get: (defaultValue) => {
if (typeof window === 'undefined') {
return defaultValue;
}
try {
return (
(window.localStorage.getItem(key) as MantineColorScheme) ||
defaultValue
);
} catch {
return defaultValue;
}
},
set: (value) => {
try {
window.localStorage.setItem(key, value);
} catch (error) {
// eslint-disable-next-line no-console
console.warn(
'[@mantine/core] Local storage color scheme manager was unable to save color scheme.',
error
);
}
},
subscribe: (onUpdate) => {
handleStorageEvent = (event) => {
if (
event.storageArea === window.localStorage &&
event.key === key
) {
isMantineColorScheme(event.newValue) &&
onUpdate(event.newValue);
}
};
window.addEventListener('storage', handleStorageEvent);
},
unsubscribe: () => {
window.removeEventListener('storage', handleStorageEvent);
},
clear: () => {
window.localStorage.removeItem(key);
},
};
}
Then custom color scheme manager can be passed to [MantineProvider](/theming/mantine-provider/)
:
import { MantineProvider } from '@mantine/core';
import { localStorageColorSchemeManager } from './localStorageColorSchemeManager';
const colorSchemeManager = localStorageColorSchemeManager({
key: 'my-color-scheme',
});
function Demo() {
return (
{/* Your app here */}
);
}
[Default color scheme](#default-color-scheme)
----------------------------------------------
The default color scheme value is used when the user has not selected any color scheme yet. It is required to be set both on [MantineProvider](/theming/mantine-provider/)
and `ColorSchemeScript`. If `defaultColorScheme` is not set, then `light` is used.
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
function Demo() {
return (
<>
{/* Your app here */}
);
}
[Force color scheme](#force-color-scheme)
------------------------------------------
You can force the color scheme value to be either `light` or `dark` with `forceColorScheme` prop. It is required to be set both on [MantineProvider](/theming/mantine-provider/)
and `ColorSchemeScript`. If `forceColorScheme` is set, then `defaultColorScheme` and `colorSchemeManager` are ignored. When `forceColorScheme` is set, it is not possible to change color scheme value with `setColorScheme` function.
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
function Demo() {
return (
<>
{/* Your app here */}
);
}
[lightHidden and darkHidden props](#lighthidden-and-darkhidden-props)
----------------------------------------------------------------------
All Mantine components support `lightHidden` and `darkHidden` props that can be used to hide component in specific color scheme:
Visible in dark color scheme onlyVisible in light color scheme only
Demo.tsx
import { Button } from '@mantine/core';
function Demo() {
return (
<>
);
}
Expand code
[With disabled JavaScript](#with-disabled-javascript)
------------------------------------------------------
If you need to support users with disabled JavaScript, you need to set `data-mantine-color-scheme` attribute on the `` element manually.
Example with Next.js app router that supports disabled JavaScript:
import '@mantine/core/styles.css';
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
export const metadata = {
title: 'My Mantine app',
description: 'I have followed setup instructions carefully',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
[Previous\
\
Colors](/theming/colors/)
[Next\
\
Typography](/theming/typography/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Usage with TypeScript | Mantine
Usage with TypeScript
=====================
All `@mantine/*` packages are fully compatible with TypeScript. All examples in the documentation are written in TypeScript – you can copy-paste them to your project without any changes.
This guide will help you get familiar with types that `@mantine/core` package exports.
[Components props types](#components-props-types)
--------------------------------------------------
Each `@mantine/` package that exports components, exports props types for these components as well. You can import component props types by adding `Props` to the component name, for example, you can import Button and DatePicker components props like so:
import type { ButtonProps } from '@mantine/core';
import type { DatePickerProps } from '@mantine/dates';
Note that there are two variations of props types: for polymorphic components and for regular components. Regular components props types include `React.ComponentPropsWithoutRef<'X'>`, where `X` is the root element type, for example `'div'`.
Example of extending regular component props:
import { Group, GroupProps } from '@mantine/core';
// Interface includes `React.ComponentPropsWithoutRef<'div'>`
interface MyGroupProps extends GroupProps {
spacing: number;
}
function MyGroup({ spacing, ...others }: MyGroupProps) {
return ;
}
[Polymorphic components](/guides/polymorphic/)
props types do not include `React.ComponentPropsWithoutRef<'X'>` because their root element depends on the `component` prop value.
Example of extending [polymorphic components](/guides/polymorphic/)
props:
import { Button, ButtonProps, ElementProps } from '@mantine/core';
interface MyButtonProps
extends ButtonProps,
ElementProps<'button', keyof ButtonProps> {
height: number;
}
function MyButton({ height, ...others }: MyButtonProps) {
return ;
}
[ElementProps type](#elementprops-type)
----------------------------------------
`ElementProps` is a utility type similar to `React.ComponentPropsWithoutRef`, but with additional features. It replaces native elements `style` prop with Mantine [style prop](/styles/style/)
and allows omitting properties that are passed as a second type.
import { ButtonProps, ElementProps } from '@mantine/core';
// Equivalent of `React.ComponentPropsWithoutRef<'button'>`
type ButtonElementProps = ElementProps<'button'>;
// Equivalent of `Omit, 'color' | 'onClick'>`
type OmitColor = ElementProps<'button', 'color' | 'onClick'>;
// Removes all Mantine component props from React component props
// to avoid props types conflicts
// Equivalent of `Omit, keyof ButtonProps>`
type OmitButtonProps = ElementProps<'button', keyof ButtonProps>;
[MantineTheme type](#mantinetheme-type)
----------------------------------------
`MantineTheme` is a type of [theme object](/theming/theme-object/)
. You can use it to add types to functions that accept theme object as an argument:
import { MantineTheme, useMantineTheme } from '@mantine/core';
function getPrimaryColor(theme: MantineTheme) {
return theme.colors.blue[5];
}
function Demo() {
const theme = useMantineTheme();
return ;
}
[MantineThemeOverride type](#mantinethemeoverride-type)
--------------------------------------------------------
`MantineThemeOverride` type is a deep partial of `MantineTheme`. It can be used in functions that accept theme override as an argument:
import {
createTheme,
MantineThemeOverride,
mergeThemeOverrides,
} from '@mantine/core';
const baseTheme = createTheme({
fontFamily: 'Helvetica, sans-serif',
});
function mergeThemes(themes: MantineThemeOverride[]) {
return mergeThemeOverrides(baseTheme, ...themes);
}
const overrideTheme = createTheme({
primaryColor: 'blue',
});
const overrideTheme2 = createTheme({
cursorType: 'pointer',
});
const mergedTheme = mergeThemes([overrideTheme, overrideTheme2]);
[MantineColorScheme type](#mantinecolorscheme-type)
----------------------------------------------------
`MantineColorScheme` is a union of `'light' | 'dark' | 'auto'` values. You can use to add types to function that accept color scheme as an argument:
import {
MantineColorScheme,
useMantineColorScheme,
} from '@mantine/core';
function getComputedColorScheme(colorScheme: MantineColorScheme) {
return colorScheme === 'auto' ? 'light' : colorScheme;
}
function Demo() {
const { colorScheme } = useMantineColorScheme();
const computed = getComputedColorScheme(colorScheme);
}
[MantineSize type](#mantinesize-type)
--------------------------------------
`MantineSize` type is a union of `'xs' | 'sm' | 'md' | 'lg' | 'xl'` values. You can use to add types to various props that accept size as an argument, for example, `radius`, `shadow`, `p`.
import { MantineSize, Paper } from '@mantine/core';
interface DemoProps {
size: MantineSize;
radius: MantineSize | (string & {}) | number;
shadow: MantineSize | string;
}
function Demo({ size, radius, shadow }: DemoProps) {
return ;
}
[Theme object declarations](#theme-object-declarations)
--------------------------------------------------------
You can change `theme.other` and `theme.colors` types by extending `MantineTheme` interface in `.d.ts` file. Create `mantine.d.ts` anywhere in your project (must be included in `tsconfig.json`) to extend theme object types.
To override `theme.other`:
// mantine.d.ts
declare module '@mantine/core' {
export interface MantineThemeOther {
myCustomProperty: string;
myCustomFunction: () => void;
}
}
To override `theme.colors`:
import {
DefaultMantineColor,
MantineColorsTuple,
} from '@mantine/core';
type ExtendedCustomColors =
| 'primaryColorName'
| 'secondaryColorName'
| DefaultMantineColor;
declare module '@mantine/core' {
export interface MantineThemeColorsOverride {
colors: Record;
}
}
Note that extending theme type is not required, it is only needed if you want to make your theme object types more strict and add autocomplete in your editor.
[Custom variants types](#custom-variants-types)
------------------------------------------------
You can define types for custom [variants](/styles/variants-sizes/)
by extending `{x}Props` interface with the new variant type in your `mantine.d.ts` file.
Example of adding custom variant type to [Button](/core/button/)
component:
import { ButtonVariant, MantineSize } from '@mantine/core';
type ExtendedButtonVariant = ButtonVariant | 'contrast' | 'radial-gradient';
declare module '@mantine/core' {
export interface ButtonProps {
variant?: ExtendedButtonVariant;
}
}
[Previous\
\
Usage with Storybook](/guides/storybook/)
[Next\
\
Usage with JavaScript](/guides/javascript/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Testing with Jest | Mantine
Testing with Jest
=================
This guide will help you setup [Jest](https://jestjs.io/)
and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
for your project. Note that this guide only covers shared logic that can be applied to any framework, and it does not cover initial setup of [Jest](https://jestjs.io/)
and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
as it may vary depending on the framework you are using.
[Custom render](#custom-render)
--------------------------------
All Mantine components require [MantineProvider](/theming/mantine-provider/)
to be present in the component tree. To add [MantineProvider](/theming/mantine-provider/)
to the component tree in your tests, create a [custom render](https://testing-library.com/docs/react-testing-library/setup/#custom-render)
function:
// ./test-utils/render.tsx
import { render as testingLibraryRender } from '@testing-library/react';
import { MantineProvider } from '@mantine/core';
// Import your theme object
import { theme } from '../src/theme';
export function render(ui: React.ReactNode) {
return testingLibraryRender(<>{ui}, {
wrapper: ({ children }: { children: React.ReactNode }) => (
{children}
),
});
}
It is usually more convenient to export all `@testing-library/*` functions that you are planning to use from `./testing-utils/index.ts` file:
import userEvent from '@testing-library/user-event';
export * from '@testing-library/react';
export { render } from './render';
export { userEvent };
Then you should import all testing utilities from `./testing-utils` instead of `@testing-library/react`:
import { render, screen } from '../test-utils';
import { Welcome } from './Welcome';
describe('Welcome component', () => {
it('has correct Next.js theming section link', () => {
render();
expect(screen.getByText('this guide')).toHaveAttribute(
'href',
'https://mantine.dev/guides/next/'
);
});
});
[Mock WEB APIs](#mock-web-apis)
--------------------------------
Most of Mantine components depend on browser APIs like `window.matchMedia` or `ResizeObserver`. These APIs are not available in `jest-environment-jsdom` environment and you will need to mock them in your tests.
Create `jest.setup.js` file in your project root and add the following code to it:
import '@testing-library/jest-dom';
const { getComputedStyle } = window;
window.getComputedStyle = (elt) => getComputedStyle(elt);
window.HTMLElement.prototype.scrollIntoView = () => {};
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation((query) => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(),
removeListener: jest.fn(),
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});
class ResizeObserver {
observe() {}
unobserve() {}
disconnect() {}
}
window.ResizeObserver = ResizeObserver;
Then add it as a setup file in your `jest.config.js`:
const config = {
setupFilesAfterEnv: ['/jest.setup.js'],
// ... rest of your config
};
[Framework specific setup](#framework-specific-setup)
------------------------------------------------------
Jest setup for different frameworks may vary and usually change over time. To learn how to setup Jest for your framework, either check [Jest](https://jestjs.io/docs/getting-started)
and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
documentation or check one of the premade [templates](/getting-started/)
. Most of the templates include Jest setup, and you can use them as a reference.
[Testing examples](#testing-examples)
--------------------------------------
You can find testing examples in Mantine Help Center:
* [How can I test Modal/Drawer/Popover components?](https://help.mantine.dev/q/portals-testing)
* [How can I test Select/MultiSelect components?](https://help.mantine.dev/q/combobox-testing)
[Previous\
\
Usage with JavaScript](/guides/javascript/)
[Next\
\
Testing with Vitest](/guides/vitest/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Colors | Mantine
Colors
======
Mantine uses [open-color](https://yeun.github.io/open-color/)
in default theme with some additions. Each color has 10 shades.
Colors are exposed on the [theme object](/theming/theme-object/)
as an array of strings, you can access color shade by color name and index (0-9), colors with larger index are darker:
import { useMantineTheme } from '@mantine/core';
function Demo() {
const theme = useMantineTheme();
return (
This is a blue theme
);
}
Colors are also exposed as [CSS variables](/styles/css-variables/)
:
.demo {
color: var(--mantine-color-red-5);
background: var(--mantine-color-grape-9);
border: rem(1px) solid var(--mantine-color-blue-1);
}
[Adding extra colors](#adding-extra-colors)
--------------------------------------------
You can add any number of extra colors to `theme.colors` object. This will allow you to use them in all components that support `color` prop, for example [Button](/core/button/)
, [Badge](/core/badge/)
and [Switch](/core/switch/)
.
Ocean blue buttonBright pink button
Demo.tsx
import { Group, Button, MantineProvider, createTheme } from '@mantine/core';
const theme = createTheme({
colors: {
'ocean-blue': ['#7AD1DD', '#5FCCDB', '#44CADC', '#2AC9DE', '#1AC2D9', '#11B7CD', '#09ADC3', '#0E99AC', '#128797', '#147885'],
'bright-pink': ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
},
});
function Demo() {
return (
);
}
Expand code
> **10 shades per color**
>
> Colors override must include **at least 10 shades per color**. Otherwise, you will get a TypeScript error and some variants will not have proper colors. If you only have one color value, you can either pick the remaining colors manually or use the [colors generator tool](/colors-generator/)
> .
>
> You can add more than 10 shades per color: these values will not be used by Mantine components with the default colors resolver, but you can still reference them by index, for example, `color="blue.11"`.
[Virtual colors](#virtual-colors)
----------------------------------
Virtual color is a special color which values should be different for light and dark color schemes. To define a virtual color, use `virtualColor` function which accepts an object with the following properties as a single argument:
* `name` – color name, must be the same as the key in `theme.colors` object
* `light` – a key of `theme.colors` object for light color scheme
* `dark` – a key of `theme.colors` object for dark color scheme
To see the demo in action, switch between light and dark color schemes (`Ctrl + J`):
This box has virtual background color, it is pink in dark mode and cyan in light mode
App.tsxDemo.tsx
import { createTheme, MantineProvider, virtualColor } from '@mantine/core';
import { Demo } from './Demo';
const theme = createTheme({
colors: {
primary: virtualColor({
name: 'primary',
dark: 'pink',
light: 'cyan',
}),
},
});
function App() {
return (
);
}
Expand code
[colorsTuple](#colorstuple)
----------------------------
Use `colorsTuple` function to:
* Use single color as the same color for all shades
* Transform dynamic string arrays to Mantine color tuple (the array should still have 10 values)
import { colorsTuple, createTheme } from '@mantine/core';
const theme = createTheme({
colors: {
custom: colorsTuple('#FFC0CB'),
dynamic: colorsTuple(
Array.from({ length: 10 }, (_, index) => '#FFC0CB')
),
},
});
[Supported color formats](#supported-color-formats)
----------------------------------------------------
You can use the following color formats in `theme.colors`:
* HEX: `#fff`, `#ffffff`
* RGB: `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.5)`
* HSL: `hsl(0, 0%, 100%)`, `hsla(0, 0%, 100%, 0.5)`
* OKLCH: `oklch(96.27% 0.0217 238.66)`, `oklch(96.27% 0.0217 238.66 / 0.5)`
Example of adding oklch color to theme:
FilledOutlineLight
Demo.tsx
import { MantineProvider, createTheme, Group, Button } from '@mantine/core';
const theme = createTheme({
colors: {
'oklch-blue': [\
'oklch(96.27% 0.0217 238.66)',\
'oklch(92.66% 0.0429 240.01)',\
'oklch(86.02% 0.0827 241.66)',\
'oklch(78.2% 0.13 243.83)',\
'oklch(71.8% 0.1686 246.06)',\
'oklch(66.89% 0.1986 248.32)',\
'oklch(62.59% 0.2247 250.29)',\
'oklch(58.56% 0.2209 251.26)',\
'oklch(54.26% 0.2067 251.67)',\
'oklch(49.72% 0.1888 251.59)',\
],
}
});
function Demo() {
return (
);
}
Expand code
[primaryColor](#primarycolor)
------------------------------
`theme.primaryColor` is a key of `theme.colors`, it is used:
* As a default value for most of the components that support `color` prop
* To set default focus ring outline color
Primary buttonBlue button
Demo.tsx
import { Group, Button, MantineProvider, createTheme } from '@mantine/core';
const theme = createTheme({
primaryColor: 'bright-pink',
colors: {
'bright-pink': ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
},
});
function Demo() {
return (
);
}
Expand code
> **CSS color values at `theme.primaryColor`**
>
> Value of `theme.primaryColor` must be a key of `theme.colors` object. For example, `blue`, `orange` or `green`. You cannot assign CSS color values, for example, the following code will throw an error during theme merging:
>
> import { MantineProvider } from '@mantine/core';
>
> function Demo() {
> return (
> theme={{
> primaryColor: '#CEFEDC', // This will throw an error
> }}
> >
> {/* Your app here */}
>
> );
> }
[primaryShade](#primaryshade)
------------------------------
`theme.primaryShade` is a number from 0 to 9. It determines which shade will be used for the components that have `color` prop.
FilledLightOutline
Primary shade
Demo.tsx
import { MantineProvider, Button, Group } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
You can also customize primary shade for dark and light color schemes separately:
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
{/* Your app here */}
);
}
[Color prop](#color-prop)
--------------------------
Components that support changing their color have `color` prop. This prop supports the following values:
* Key of `theme.colors`, for example, `blue` or `green`
* Key of `theme.colors` with color index, for example, `blue.5` or `green.9`
* CSS color value, for example, `#fff` or `rgba(0, 0, 0, 0.5)`
Filled variant
Theme colorHex color
Light variant
Theme colorHex color
Outline variant
Theme colorHex color
Demo.tsx
import { Group, Button, Text } from '@mantine/core';
function Demo() {
return (
<>
Filled variant
Light variant
Outline variant
);
}
Expand code
[Colors index reference](#colors-index-reference)
--------------------------------------------------
You can reference colors by index in `color` prop and [style props](/styles/style-props/)
, for example `c` prop:
Text with blue.6 color
Button
Index
Demo.tsx
import { Button, Text } from '@mantine/core';
function Demo() {
return (
<>
Text with blue.6 color
);
}
Expand code
[Difference between color and c props](#difference-between-color-and-c-props)
------------------------------------------------------------------------------
`color` prop is used to control multiple CSS properties of the component. These properties can vary across different components, but usually `color` prop controls `background`, `color` and `border-color` CSS properties. For example, when you set `color="#C3FF36"` on [Button](/core/button/)
component (with `variant="filled"`), it will set the following CSS properties:
* `background-color` to `#C3FF36`
* `background-color` when button is hovered to `#B0E631` (`#C3FF36` darkened by 10%)
* `color` to `var(--mantine-color-white)`
* `border-color` to `transparent`
`c` is a [style prop](/styles/style-props/)
– it is responsible for setting a single CSS property `color` (color of the text). You can combine both props to achieve better contrast between text and background. In the following example:
* `color` prop sets all `background: #C3FF36` and `color: var(--mantine-color-white)`
* `c` prop overrides color styles to `color: var(--mantine-color-black)`
Button with color and c props
Demo.tsx
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
[Colors variant resolver](#colors-variant-resolver)
----------------------------------------------------
`theme.variantColorResolver` is a function that is used to determine which colors will be used in different variants in the following components: [Alert](/core/alert/)
, [Avatar](/core/avatar/)
, [Button](/core/button/)
, [Badge](/core/badge/)
and [ActionIcon](/core/action-icon/)
.
It accepts an object argument with the following properties:
interface VariantColorsResolverInput {
/** `color` prop passed to component */
color: MantineColor | undefined;
/** `variant` prop passed to component */
variant: string;
/** `gradient` prop passed to component, used only for gradient variant by default */
gradient?: MantineGradient;
/** Theme object */
theme: MantineTheme;
}
`theme.variantColorResolver` must return an object with the following properties:
interface VariantColorResolverResult {
background: string;
hover: string;
color: string;
border: string;
}
You can use `theme.variantColorResolver` to customize colors handling by default variants or to add new variants support:
Lime filled buttonOrange light buttonDanger button
Demo.tsx
import {
Button,
Group,
MantineProvider,
defaultVariantColorsResolver,
VariantColorsResolver,
parseThemeColor,
rgba,
darken,
} from '@mantine/core';
const variantColorResolver: VariantColorsResolver = (input) => {
const defaultResolvedColors = defaultVariantColorsResolver(input);
const parsedColor = parseThemeColor({
color: input.color || input.theme.primaryColor,
theme: input.theme,
});
// Override some properties for variant
if (parsedColor.isThemeColor && parsedColor.color === 'lime' && input.variant === 'filled') {
return {
...defaultResolvedColors,
color: 'var(--mantine-color-black)',
hoverColor: 'var(--mantine-color-black)',
};
}
// Completely override variant
if (input.variant === 'light') {
return {
background: rgba(parsedColor.value, 0.1),
hover: rgba(parsedColor.value, 0.15),
border: `1px solid ${parsedColor.value}`,
color: darken(parsedColor.value, 0.1),
};
}
// Add new variants support
if (input.variant === 'danger') {
return {
background: 'var(--mantine-color-red-9)',
hover: 'var(--mantine-color-red-8)',
color: 'var(--mantine-color-white)',
border: 'none',
};
}
return defaultResolvedColors;
};
function Demo() {
return (
);
}
Expand code
[Colors generation](#colors-generation)
----------------------------------------
You can use [colors generator](/colors-generator/)
to generate 10 shades of color based on a single value or install `@mantine/colors-generator` package to generate dynamic colors in your application:
yarnnpm
yarn add chroma-js @mantine/colors-generator
Expand code
The package exports `generateColors` function that accepts a color value and returns an array of 10 shades. Note that `generateColors` function works best with darker colors (blue, violet, red) and may produce colors with poor contrast for lighter colors (yellow, teal, orange). Usually, it is better to generate colors in advance to avoid contrast issues.
import { generateColors } from '@mantine/colors-generator';
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
{/* Your app here */}
);
}
[Default colors](#default-colors)
----------------------------------
dark 0
#C9C9C9
dark 1
#b8b8b8
dark 2
#828282
dark 3
#696969
dark 4
#424242
dark 5
#3b3b3b
dark 6
#2e2e2e
dark 7
#242424
dark 8
#1f1f1f
dark 9
#141414
gray 0
#f8f9fa
gray 1
#f1f3f5
gray 2
#e9ecef
gray 3
#dee2e6
gray 4
#ced4da
gray 5
#adb5bd
gray 6
#868e96
gray 7
#495057
gray 8
#343a40
gray 9
#212529
red 0
#fff5f5
red 1
#ffe3e3
red 2
#ffc9c9
red 3
#ffa8a8
red 4
#ff8787
red 5
#ff6b6b
red 6
#fa5252
red 7
#f03e3e
red 8
#e03131
red 9
#c92a2a
pink 0
#fff0f6
pink 1
#ffdeeb
pink 2
#fcc2d7
pink 3
#faa2c1
pink 4
#f783ac
pink 5
#f06595
pink 6
#e64980
pink 7
#d6336c
pink 8
#c2255c
pink 9
#a61e4d
grape 0
#f8f0fc
grape 1
#f3d9fa
grape 2
#eebefa
grape 3
#e599f7
grape 4
#da77f2
grape 5
#cc5de8
grape 6
#be4bdb
grape 7
#ae3ec9
grape 8
#9c36b5
grape 9
#862e9c
violet 0
#f3f0ff
violet 1
#e5dbff
violet 2
#d0bfff
violet 3
#b197fc
violet 4
#9775fa
violet 5
#845ef7
violet 6
#7950f2
violet 7
#7048e8
violet 8
#6741d9
violet 9
#5f3dc4
indigo 0
#edf2ff
indigo 1
#dbe4ff
indigo 2
#bac8ff
indigo 3
#91a7ff
indigo 4
#748ffc
indigo 5
#5c7cfa
indigo 6
#4c6ef5
indigo 7
#4263eb
indigo 8
#3b5bdb
indigo 9
#364fc7
blue 0
#e7f5ff
blue 1
#d0ebff
blue 2
#a5d8ff
blue 3
#74c0fc
blue 4
#4dabf7
blue 5
#339af0
blue 6
#228be6
blue 7
#1c7ed6
blue 8
#1971c2
blue 9
#1864ab
cyan 0
#e3fafc
cyan 1
#c5f6fa
cyan 2
#99e9f2
cyan 3
#66d9e8
cyan 4
#3bc9db
cyan 5
#22b8cf
cyan 6
#15aabf
cyan 7
#1098ad
cyan 8
#0c8599
cyan 9
#0b7285
teal 0
#e6fcf5
teal 1
#c3fae8
teal 2
#96f2d7
teal 3
#63e6be
teal 4
#38d9a9
teal 5
#20c997
teal 6
#12b886
teal 7
#0ca678
teal 8
#099268
teal 9
#087f5b
green 0
#ebfbee
green 1
#d3f9d8
green 2
#b2f2bb
green 3
#8ce99a
green 4
#69db7c
green 5
#51cf66
green 6
#40c057
green 7
#37b24d
green 8
#2f9e44
green 9
#2b8a3e
lime 0
#f4fce3
lime 1
#e9fac8
lime 2
#d8f5a2
lime 3
#c0eb75
lime 4
#a9e34b
lime 5
#94d82d
lime 6
#82c91e
lime 7
#74b816
lime 8
#66a80f
lime 9
#5c940d
yellow 0
#fff9db
yellow 1
#fff3bf
yellow 2
#ffec99
yellow 3
#ffe066
yellow 4
#ffd43b
yellow 5
#fcc419
yellow 6
#fab005
yellow 7
#f59f00
yellow 8
#f08c00
yellow 9
#e67700
orange 0
#fff4e6
orange 1
#ffe8cc
orange 2
#ffd8a8
orange 3
#ffc078
orange 4
#ffa94d
orange 5
#ff922b
orange 6
#fd7e14
orange 7
#f76707
orange 8
#e8590c
orange 9
#d9480f
[Add custom colors types](#add-custom-colors-types)
----------------------------------------------------
TypeScript will only autocomplete Mantine's default colors when accessing the theme. To add your custom colors to the MantineColor type, you can use TypeScript module declaration.
import {
DefaultMantineColor,
MantineColorsTuple,
} from '@mantine/core';
type ExtendedCustomColors =
| 'primaryColorName'
| 'secondaryColorName'
| DefaultMantineColor;
declare module '@mantine/core' {
export interface MantineThemeColorsOverride {
colors: Record;
}
}
[Previous\
\
Theme object](/theming/theme-object/)
[Next\
\
Color schemes](/theming/color-schemes/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Styles overview | Mantine
Styles overview
===============
This guide will help you understand how to apply styles to Mantine and custom components.
[Component specific props](#component-specific-props)
------------------------------------------------------
Most of the components provide props that allow you to customize their styles. For example, [Button](/core/button/)
component has `color`, `variant`, `size` and `radius` props that control its appearance:
Button
Variant
DefaultFilledLightOutlineSubtleTransparentWhite
Color
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
Demo.tsx
import { Button } from '@mantine/core';
function Demo() {
return ;
}
Expand code
These props usually control multiple CSS properties, for example `color` and variant props control `color`, `background-color` and `border` properties. In most cases, changing components props is the most optimal way to customize Mantine components.
[Style props](#style-props)
----------------------------
[Style props](/styles/style-props/)
work similar to component specific props, but with several differences:
* Style props are not component specific, they can be used with any component.
* Style props always control a single CSS property. For example, `c` prop controls CSS `color` property, while `color` prop controls a set of properties: `color`, `background-color` and `border-color`.
* Style props are set in `style` attribute. It is not possible to override them with CSS without using `!important`.
[Style props](/styles/style-props/)
are useful when you need to change a single CSS property without creating a separate file for styles. Some of the most common use cases are:
* Changing text color and font-size
import { Text } from '@mantine/core';
function Demo() {
return (
Card title
Card description
);
}
* Applying margins to inputs inside a form:
import { TextInput } from '@mantine/core';
function Demo() {
return (
);
}
* Adding padding to various elements:
import { Paper } from '@mantine/core';
function Demo() {
return My custom card;
}
Note that [style props](/styles/style-props/)
were never intended to be used as a primary way of styling components. In most cases, it is better to limit the number of style props used per component to 3-4. If you find yourself using more than 4 style props, consider creating a separate file with styles – it will be easier to maintain and will be more [performant](/styles/styles-performance/)
.
[Style prop](#style-prop)
--------------------------
[Style prop](/styles/style/)
is supported by all Mantine components and allows setting CSS properties as well as CSS variables. It is useful in the following cases:
* You want to apply a single CSS property to a component:
import { Button, Flex } from '@mantine/core';
function Demo() {
return (
);
}
* You want to set a CSS variable based on component prop:
import { Box } from '@mantine/core';
function Demo({ color }: { color: string }) {
// Later you will be able to use var(--my-color) in any nested element
return My box;
}
[Style prop](/styles/style/)
works the same way as React `style` prop. It is not recommended to use it as a primary way of styling components. In most cases, it is better to create a separate file with styles – it will be easier to maintain and will be more [performant](/styles/styles-performance/)
.
[CSS modules](#css-modules)
----------------------------
[CSS modules](/styles/css-modules/)
is the recommended way of applying most of the styles to Mantine components. CSS modules are the most performant and flexible way of styling components.
// Demo.module.css
.root {
padding-right: rem(100px);
&[data-collapsed] {
padding-right: rem(40px);
& .control {
max-width: rem(200px);
}
}
}
.control {
background-color: var(--mantine-color-blue-1);
color: var(--mantine-color-blue-filled);
padding: var(--mantine-spacing-xl);
margin-left: rem(40px);
@media (max-width: $mantine-breakpoint-sm) {
margin-left: 0;
margin-top: var(--mantine-spacing-md);
}
@mixin hover {
background-color: light-dark(
var(--mantine-color-blue-1),
var(--mantine-color-blue-9)
);
}
}
// Demo.tsx
import classes from './Demo.module.css';
function Demo({ collapsed }: { collapsed: boolean }) {
return (
);
}
[Theme tokens](#theme-tokens)
------------------------------
You can reference Mantine [theme](/theming/theme-object/)
values in any styles with [CSS variables](/styles/css-variables/)
:
* In [CSS modules](/styles/css-modules/)
:
.root {
// references theme.colors.red[5]
background: var(--mantine-color-red-5);
// references theme.spacing.md
margin-top: var(--mantine-spacing-md);
// references theme.headings.fontFamily
font-family: var(--mantine-font-family-headings);
}
* In [style props](/styles/style-props/)
:
import { Box } from '@mantine/core';
function Demo() {
// bg="red.5" references theme.colors.red[5]
// "red.5" is a shorthand for var(--mantine-color-red-5)
// mt="xl" references theme.spacing.xl
// "xl" is a shorthand for var(--mantine-spacing-xl)
return (
My box
);
}
* In [style prop](/styles/style/)
:
import { Box } from '@mantine/core';
function Demo() {
return (
<>
With CSS variables
({
margin: theme.spacing.xl,
color: theme.colors.orange[5],
})}
>
With theme object
);
}
[Previous\
\
Default props](/theming/default-props/)
[Next\
\
Mantine styles](/styles/mantine-styles/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Functions reference | Mantine
Functions reference
===================
This guides contains a list of functions exported from Mantine packages that are not documented anywhere else.
[clamp](#clamp)
----------------
`clamp` function is exported from `@mantine/hooks`. It clamps number within the inclusive lower and upper bounds.
import { clamp } from '@mantine/hooks';
// With both min and max boundaries
clamp(10, 0, 5); // 5
clamp(100, 0, 5); // 5
clamp(-100, 0, 5); // 0
// With only min boundary
clamp(10, 0, undefined); // 10
clamp(-100, 0, undefined); // 0
// With only max boundary
clamp(0, undefined, 5); // 0
clamp(10, undefined, 5); // 5
[lowerFirst](#lowerfirst)
--------------------------
`lowerFirst` function is exported from `@mantine/hooks`. It converts first character of a string to lower case.
import { lowerFirst } from '@mantine/hooks';
lowerFirst('Mantine'); // mantine
lowerFirst('mantine'); // mantine
[upperFirst](#upperfirst)
--------------------------
`upperFirst` function is exported from `@mantine/hooks`. It converts first character of a string to upper case.
import { upperFirst } from '@mantine/hooks';
upperFirst('Mantine'); // Mantine
upperFirst('mantine'); // Mantine
[randomId](#randomid)
----------------------
`randomId` function is exported from `@mantine/hooks`. It generates random id with `mantine-` prefix.
import { randomId } from '@mantine/hooks';
randomId(); // mantine-d7h137oav
randomId(); // mantine-1q2j3j4j5
[range](#range)
----------------
`range` function is exported from `@mantine/hooks`. It generates array of numbers from `start` to `end` (inclusive).
import { range } from '@mantine/hooks';
range(0, 5); // [0, 1, 2, 3, 4, 5]
range(5, 0); // [5, 4, 3, 2, 1, 0]
[shallowEqual](#shallowequal)
------------------------------
`shallowEqual` function is exported from `@mantine/hooks`. It performs shallow equal check of two objects.
import { shallowEqual } from '@mantine/hooks';
shallowEqual({ a: 1 }, { a: 1 }); // true
shallowEqual({ a: 1 }, { a: 2 }); // false
[Previous\
\
Testing with Vitest](/guides/vitest/)
[Next\
\
6.x to 7.x migration](/guides/6x-to-7x/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Testing with Vitest | Mantine
Testing with Vitest
===================
This guide will help you setup [Vitest](https://vitest.dev/)
and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
for your project. Note that this guide intended for projects that use [Vite](https://vitejs.dev/)
as a bundler, if you are using other frameworks/bundlers, it is recommended to use [Jest](/guides/jest/)
instead.
[Installation](#installation)
------------------------------
Install vitest and react testing library:
yarnnpm
yarn add --dev vitest jsdom @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event
Expand code
If you want to run tests from your IDE, install one of the [extensions](https://vitest.dev/guide/ide)
.
[Configuration](#configuration)
--------------------------------
Add vitest configuration to your Vite config file:
import { defineConfig } from 'vite';
export default defineConfig({
// ... rest of your config
test: {
globals: true,
environment: 'jsdom',
setupFiles: './vitest.setup.mjs',
},
});
Then create `vitest.setup.mjs` file in your project root and add the following code to it:
import '@testing-library/jest-dom/vitest';
import { vi } from 'vitest';
const { getComputedStyle } = window;
window.getComputedStyle = (elt) => getComputedStyle(elt);
window.HTMLElement.prototype.scrollIntoView = () => {};
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: vi.fn().mockImplementation((query) => ({
matches: false,
media: query,
onchange: null,
addListener: vi.fn(),
removeListener: vi.fn(),
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
dispatchEvent: vi.fn(),
})),
});
class ResizeObserver {
observe() {}
unobserve() {}
disconnect() {}
}
window.ResizeObserver = ResizeObserver;
The code above mocks `window.matchMedia` and `ResizeObserver` APIs that are not available in `jsdom` environment but are required by some Mantine components.
Optionally you can add vitest scripts to your `package.json`:
{
"scripts": {
"vitest": "vitest run",
"vitest:watch": "vitest"
}
}
[Custom render](#custom-render)
--------------------------------
All Mantine components require [MantineProvider](/theming/mantine-provider/)
to be present in the component tree. To add [MantineProvider](/theming/mantine-provider/)
to the component tree in your tests, create a [custom render](https://testing-library.com/docs/react-testing-library/setup/#custom-render)
function:
// ./test-utils/render.tsx
import { render as testingLibraryRender } from '@testing-library/react';
import { MantineProvider } from '@mantine/core';
// Import your theme object
import { theme } from '../src/theme';
export function render(ui: React.ReactNode) {
return testingLibraryRender(<>{ui}, {
wrapper: ({ children }: { children: React.ReactNode }) => (
{children}
),
});
}
It is usually more convenient to export all `@testing-library/*` functions that you are planning to use from `./testing-utils/index.ts` file:
import userEvent from '@testing-library/user-event';
export * from '@testing-library/react';
export { render } from './render';
export { userEvent };
Then you should import all testing utilities from `./testing-utils` instead of `@testing-library/react`:
import { render, screen } from '../test-utils';
import { Welcome } from './Welcome';
describe('Welcome component', () => {
it('has correct Next.js theming section link', () => {
render();
expect(screen.getByText('this guide')).toHaveAttribute(
'href',
'https://mantine.dev/guides/next/'
);
});
});
[Example of a full setup](#example-of-a-full-setup)
----------------------------------------------------
You can find an example with a full Vitest setup in [mantine-vite-template](https://github.com/mantinedev/vite-template)
.
[Previous\
\
Testing with Jest](/guides/jest/)
[Next\
\
Functions reference](/guides/functions-reference/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# 6.x to 7.x migration | Mantine
6.x → 7.x migration guide
=========================
This guide is intended to help you migrate your project styles from 6.x to 7.x. It is not intended to be a comprehensive guide to all the changes in 7.x. For that, please see the [7.0.0 changelog](/changelog/7-0-0/)
.
[Migration to @mantine/emotion](#migration-to-mantineemotion)
--------------------------------------------------------------
`@mantine/emotion` package is available starting from version 7.9. If you do not want to use CSS modules, have a lot of styles created with `createStyles`, `sx` and `styles` props, or just prefer CSS-in-JS syntax, you can migrate to `@mantine/emotion`. To view the full documentation for `@mantine/emotion` package, visit [this page](/styles/emotion/)
.
### [createStyles and Global component](#createstyles-and-global-component)
`createStyles` function and `Global` component are no longer available in `@mantine/core` package. Change imports to `@mantine/emotion`:
// 6.x
import { createStyles, Global } from '@mantine/core';
// 7.x
import { createStyles, Global } from '@mantine/emotion';
### [sx and styles props](#sx-and-styles-props)
`sx` and styles props available in 7.x the same way as in 6.x after [setup](/styles/emotion/)
:
// 6.x and 7.x, no changes
import { Box, Button } from '@mantine/core';
function Demo() {
return (
<>
({ backgroundColor: theme.colors.red[5] })}
/>
);
}
### [theme.colorScheme](#themecolorscheme)
In v7 color scheme value is managed by [MantineProvider](/theming/mantine-provider/)
, [theme object](/theming/theme-object/)
no longer includes `colorScheme` property. Although it is still possible to access color scheme value in components with [useMantineColorScheme](/theming/color-schemes/#use-mantine-color-scheme-hook)
hook, it is not recommended to base your styles on its value. Instead, use `light`/`dark` [utilities](/styles/emotion/#utilities)
.
Example of 6.x `createStyles` with `theme.colorScheme` migration to 7.0:
// 6.x
import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
root: {
backgroundColor:
theme.colorScheme === 'dark'
? theme.colors.dark[6]
: theme.colors.gray[0],
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
},
}));
// 7.x
import { createStyles } from '@mantine/emotion';
const useStyles = createStyles((theme, _, u) => ({
root: {
[u.dark] {
backgroundColor: theme.colors.dark[6];
color: theme.white;
},
[u.light]: {
backgroundColor: theme.colors.gray[0];
color: theme.black;
},
},
}));
[Migration to CSS modules](#migration-to-css-modules)
------------------------------------------------------
Before getting started, it is recommended to go through [styles](/styles/css-modules/)
documentation. Most notable parts:
* [CSS Modules](/styles/css-modules/)
* [Mantine PostCSS preset](/styles/postcss-preset/)
* [CSS variables](/styles/css-variables/)
* [data-\* attributes](/styles/data-attributes/)
* [Styles API](/styles/styles-api/)
* [Responsive styles](/styles/responsive/)
Note that this guide assumes that you have [postcss-preset-mantine](/styles/postcss-preset/)
installed and configured in your project.
### [createStyles](#createstyles)
`createStyles` function is no longer available in 7.0. Use [CSS Modules](/styles/css-modules/)
instead.
// 6.x
import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
root: {
backgroundColor: theme.colors.red[5],
},
}));
/* 7.0 */
.root {
background-color: var(--mantine-color-red-5);
}
### [sx prop](#sx-prop)
`sx` and prop is no longer available in 7.0. Use `className` or [style prop](/styles/style/)
instead.
// 6.x
import { Box } from '@mantine/core';
function Demo() {
return (
({ backgroundColor: theme.colors.red[5] })} />
);
}
// 7.0
import { Box } from '@mantine/core';
function Demo() {
return (
);
}
Nested selectors are not supported in [style prop](/styles/style/)
, use `className` instead:
// 6.x
import { Box } from '@mantine/core';
function Demo() {
return ;
}
.box {
&:hover {
background: red;
}
}
### [styles prop](#styles-prop)
`styles` prop no longer supports nested selectors. Use `classNames` instead to apply styles to nested elements.
// 6.x – nested selectors
import { TextInput } from '@mantine/core';
function Demo() {
return (
);
}
/* 7.0 */
.input {
&:focus {
color: red;
}
}
Regular selectors are still supported:
// Works both in 6.x and 7.x
import { TextInput } from '@mantine/core';
function Demo() {
return (
);
}
### [Global styles](#global-styles)
`Global` component and global styles on theme are not available in 7.0. Instead, create a global stylesheet (`.css` file) and import it in your application entry point.
// 6.x
import { Global } from '@mantine/core';
function Demo() {
return (
({
'*, *::before, *::after': {
boxSizing: 'border-box',
},
body: {
backgroundColor:
theme.colorScheme === 'dark'
? theme.colors.dark[7]
: theme.white,
color:
theme.colorScheme === 'dark'
? theme.colors.dark[0]
: theme.black,
lineHeight: theme.lineHeight,
},
'.your-class': {
backgroundColor: 'red',
},
'#your-id > [data-active]': {
backgroundColor: 'pink',
},
})}
/>
);
}
/* 7.0 */
/* src/index.css */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background-color: light-dark(
var(--mantine-color-white),
var(--mantine-color-dark-7)
);
color: light-dark(
var(--mantine-color-black),
var(--mantine-color-white)
);
line-height: var(--mantine-line-height);
}
.your-class {
background-color: red;
}
#your-id > [data-active] {
background-color: pink;
}
### [theme referencing](#theme-referencing)
All [theme](/theming/theme-object/)
properties are now available as [CSS variables](/styles/css-variables/)
. It is recommended to use [CSS variables](/styles/css-variables/)
instead of referencing theme object in styles.
// 6.x
import { Box } from '@mantine/core';
function Demo() {
return (
({
backgroundColor: theme.colors.red[6],
color: theme.white,
padding: `calc(${theme.spacing.xl} * 2)`,
})}
/>
);
}
/* 7.0 */
.box {
background-color: var(--mantine-color-red-6);
color: var(--mantine-color-white);
padding: calc(var(--mantine-spacing-xl) * 2);
}
### [theme.colorScheme](#themecolorscheme-1)
Color scheme value is managed by [MantineProvider](/theming/mantine-provider/)
, [theme object](/theming/theme-object/)
no longer includes `colorScheme` property. Although it is still possible to access color scheme value in components with [useMantineColorScheme](/theming/color-schemes/#use-mantine-color-scheme-hook)
hook, it is not recommended to base your styles on its value. Instead, use `light`/`dark` [mixins](/styles/postcss-preset/)
or `light-dark` CSS [function](/styles/postcss-preset/#light-dark-function)
.
Example of 6.x `createStyles` with `theme.colorScheme` migration to 7.0:
// 6.x
import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
root: {
backgroundColor:
theme.colorScheme === 'dark'
? theme.colors.dark[6]
: theme.colors.gray[0],
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
},
}));
/* 7.0 */
/* With light-dark function */
.root {
background-color: light-dark(
var(--mantine-color-gray-0),
var(--mantine-color-dark-6)
);
color: light-dark(
var(--mantine-color-black),
var(--mantine-color-white)
);
}
/* With light/dark mixins */
.root {
background-color: var(--mantine-color-gray-0);
color: var(--mantine-color-black);
@mixin dark {
background-color: var(--mantine-color-dark-6);
color: var(--mantine-color-white);
}
}
Note that if your application has server-side rendering, you should not render any elements based on its value ([more info](/theming/color-schemes/#color-scheme-value-caveats)
). Instead, use `light`/`dark` mixins or `light-dark` function to hide/display elements based on color scheme value.
Color scheme toggle example:
Demo.tsxDemo.module.css
import { ActionIcon, useMantineColorScheme, useComputedColorScheme } from '@mantine/core';
import { IconSun, IconMoon } from '@tabler/icons-react';
import cx from 'clsx';
import classes from './Demo.module.css';
function Demo() {
const { setColorScheme } = useMantineColorScheme();
const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
return (
setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')}
variant="default"
size="xl"
aria-label="Toggle color scheme"
>
);
}
Expand code
[Previous\
\
Functions reference](/guides/functions-reference/)
[Next\
\
use-click-outside](/hooks/use-click-outside/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Responsive styles | Mantine
Responsive styles
=================
[Media queries](#media-queries)
--------------------------------
Demo
Demo.module.cssDemo.tsx
.demo {
background-color: var(--mantine-color-blue-filled);
color: var(--mantine-color-white);
padding: var(--mantine-spacing-md);
text-align: center;
@media (min-width: em(750px)) {
background-color: var(--mantine-color-red-filled);
}
}
Expand code
[Configure breakpoints](#configure-breakpoints)
------------------------------------------------
`theme.breakpoints` are used in all responsive Mantine components. Breakpoints are expected to be set in `em` units. You can configure these values with [MantineProvider](/theming/mantine-provider/)
:
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({
breakpoints: {
xs: '30em',
sm: '48em',
md: '64em',
lg: '74em',
xl: '90em',
},
});
function Demo() {
return (
{/* Your app here */}
);
}
Default `theme.breakpoints` values:
| Breakpoint | Viewport width | Value in px |
| --- | --- | --- |
| xs | 36em | 576px |
| sm | 48em | 768px |
| md | 62em | 992px |
| lg | 75em | 1200px |
| xl | 88em | 1408px |
[Breakpoints variables in CSS modules](#breakpoints-variables-in-css-modules)
------------------------------------------------------------------------------
It is not possible to use CSS variables inside media queries – these values cannot be dynamically generated by [MantineProvider](/theming/mantine-provider/)
. To use Mantine theme breakpoints in your `.css` files, you will need `postcss-simple-vars` package:
yarnnpm
yarn add --dev postcss-simple-vars
Expand code
Add it to your [PostCSS config](/styles/postcss-preset/)
in `postcss.config.cjs`:
module.exports = {
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};
Then you will be able to access these variables in your `.css` files:
.demo {
@media (max-width: $mantine-breakpoint-xs) {
background-color: red;
}
}
Will be transformed to:
@media (max-width: 36em) {
.demo {
background-color: red;
}
}
> **Dynamic breakpoints are not supported**
>
> Values that are defined in `postcss-simple-vars` config are static and are not connected to the [theme](/theming/theme-object/)
> – if values change, you will need to update them manually in both theme override and postcss config.
[hiddenFrom and visibleFrom props](#hiddenfrom-and-visiblefrom-props)
----------------------------------------------------------------------
All Mantine components that have a root element support `hiddenFrom` and `visibleFrom` props. These props accept breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) and hide the component when viewport width is less than or greater than the specified breakpoint:
Hidden from smVisible from smVisible from md
Demo.tsx
import { Button, Group } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
[Hidden and visible from as classes](#hidden-and-visible-from-as-classes)
--------------------------------------------------------------------------
If you are building a custom component and want to use the same logic as in `hiddenFrom` and `visibleFrom` props but you do not want to use Mantine components, you can use `mantine-hidden-from-{x}` and `mantine-visible-from-{x}` classes.
function CustomComponent() {
return (
<>
Hidden from md
Visible from xl
);
}
[Component size based on media query](#component-size-based-on-media-query)
----------------------------------------------------------------------------
Some components support `size` prop, which changes various aspects of component appearance. `size` prop is not responsive – it is not possible to define different component sizes for different screen sizes. Instead, you can render multiple components with different sizes and show/hide them based on media query with `className` or `hiddenFrom`/`visibleFrom` props:
My input
My input
Demo.tsx
import { TextInput } from '@mantine/core';
function Demo() {
return (
<>
);
}
Expand code
[use-media-query hook](#use-media-query-hook)
----------------------------------------------
You can use [use-media-query hook](/hooks/use-media-query/)
to change some of component props based on media query. Note that this approach is not recommended for most of the cases if you have ssr in your application (you use Next.js, Remix, Gatsby or any other framework that includes ssr) as it may cause hydration mismatch. If you do not have ssr in your application (for example, if you use Vite), then you can safely use this hook to change props of components or conditionally render components based on hook return value.
[use-media-query hook](/hooks/use-media-query/)
can be safely used to change props of components that are not rendered on server side (modals, tooltips, etc.). In the following example, it is safe to use `useMediaQuery` hook to change [Tooltip](/core/tooltip/)
props as it is not rendered on server side:
Hover me
Demo.tsx
import { Tooltip, Button, em } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
function Demo() {
const isMobile = useMediaQuery(`(max-width: ${em(750)})`);
return (
);
}
Expand code
[use-matches hook](#use-matches-hook)
--------------------------------------
`use-matches` hook exported from `@mantine/core` is an alternative to [use-media-query](/hooks/use-media-query/)
if you need to match multiple media queries and values. It accepts an object with media queries as keys and values at given breakpoint as values.
Note that `use-matches` hook uses the same logic as [use-media-query](/hooks/use-media-query/)
under the hood, it is not recommended to be used as a primary source of responsive styles, especially if you have ssr in your application.
In the following example:
* Starting from `theme.breakpoints.lg`, color will be `red.9`
* Between `theme.breakpoints.sm` and `theme.breakpoints.lg`, color will be `orange.9`
* Below `theme.breakpoints.sm`, color will be `blue.9`
Box with color that changes based on screen size
Demo.tsx
import { Box, useMatches } from '@mantine/core';
function Demo() {
const color = useMatches({
base: 'blue.9',
sm: 'orange.9',
lg: 'red.9',
});
return (
Box with color that changes based on screen size
);
}
Expand code
[Container queries](#container-queries)
----------------------------------------
[Container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries)
enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts. Container queries are supported in [all modern browsers](https://caniuse.com/css-container-queries)
.
You can use `rem` and `em` functions from [postcss-preset-mantine](/styles/postcss-preset/#remem-functions)
in container queries. Note that CSS variables do not work in container queries and because of that [rem scaling](/styles/rem/#rem-units-scaling)
feature is not available. If you rely on this feature, it is better to define breakpoints in `px` units.
Resize parent element to see container query in action
Demo.module.cssDemo.tsx
.root {
min-width: 200px;
max-width: 100%;
min-height: 120px;
container-type: inline-size;
overflow: auto;
resize: horizontal;
}
.child {
background-color: var(--mantine-color-dimmed);
color: var(--mantine-color-white);
padding: var(--mantine-spacing-md);
@container (max-width: 500px) {
background-color: var(--mantine-color-blue-filled);
}
@container (max-width: 300px) {
background-color: var(--mantine-color-red-filled);
}
}
Expand code
[Responsive style props](#responsive-style-props)
--------------------------------------------------
You can use object syntax to add responsive styles with [style props](/styles/style-props/)
. Note that responsive style props are [less performant](/styles/styles-performance/)
than regular style props, it is not recommended to use them in large lists of elements.
Box with responsive style props
Demo.tsx
import { Box } from '@mantine/core';
function Demo() {
return (
Box with responsive style props
);
}
Expand code
Responsive values are calculated the following way:
* `base` value is used when none of breakpoint values are applied
* `xs`, `sm`, `md`, `lg`, `xl` values are used when the viewport width is larger that the value of corresponding breakpoint specified in [theme.breakpoints](/styles/responsive/)
import { Box } from '@mantine/core';
function Demo() {
return ;
}
In this case the element will have the following styles:
/* Base styles added to element and then get overwritten with responsive values */
.element {
width: 20rem;
}
/* 48em is theme.breakpoints.sm by default */
@media (min-width: 48em) {
.element {
width: 30rem;
}
}
/* 75em is theme.breakpoints.lg by default */
@media (min-width: 75em) {
.element {
width: 40rem;
}
}
[Previous\
\
style prop](/styles/style/)
[Next\
\
Styles API](/styles/styles-api/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Mantine styles | Mantine
Mantine styles
==============
This guide explains how to import styles of `@mantine/*` packages in your application and how to override them with [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)
in case you do not have a way to control the order of stylesheets in your application.
[Mantine components styles](#mantine-components-styles)
--------------------------------------------------------
All Mantine components are built with CSS modules, but all styles are bundled before publishing to npm. To include these styles, you need to import `@mantine/{package}/styles.css` file in your application. Example with `@mantine/core` package:
import '@mantine/core/styles.css';
By adding this import, you will have all styles of `@mantine/core` components in your application.
[Import styles per component](#import-styles-per-component)
------------------------------------------------------------
If you want to reduce CSS bundle size, you can import styles per component. Note that some components have dependencies, for example, [Button](/core/button/)
component uses [UnstyledButton](/core/unstyled-button/)
component internally, so you need to import styles for both components. You can find a full list of exported styles from `@mantine/core` package and additional instructions on [this page](/styles/css-files-list/)
.
import '@mantine/core/styles/UnstyledButton.css';
import '@mantine/core/styles/Button.css';
Note that individual component styles are available only for `@mantine/core` package. Other packages have minimal styles that can be imported with `@mantine/{package}/styles.css` import.
[Styles import order](#styles-import-order)
--------------------------------------------
It is important to keep the correct styles import order. `@mantine/core` package styles must always be imported before any other Mantine package styles:
// ✅ Correct order
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
// ❌ Incorrect order
import '@mantine/dates/styles.css';
import '@mantine/core/styles.css';
Your application styles must always be imported after all `@mantine/*` packages styles:
// ✅ Correct order - your styles will override Mantine styles
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
import classes from './Demo.module.css';
// ❌ Incorrect order – Mantine styles will override your styles
import classes from './Demo.module.css';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
[CSS layers](#css-layers)
--------------------------
Some bundlers and frameworks do not allow you to control the order of stylesheets in your application. For example, Next.js does not guarantee [styles import order](https://github.com/vercel/next.js/issues/16630)
. In this case, you can use [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)
to ensure that your styles will always override Mantine styles.
All `@mantine/*` packages that export styles have an additional file in which all styles are wrapped in `@layer mantine` directive.
import '@mantine/core/styles.layer.css';
import '@mantine/dates/styles.layer.css';
// ... other styles
These files contain the same styles as `styles.css` files, but wrapped in `@layer mantine` directive. Make sure that you do not import both `styles.css` and `styles.layer.css` files in your application.
// ❌ Do not import both styles.css and styles.layer.css
import '@mantine/core/styles.css';
import '@mantine/core/styles.layer.css';
Similar to package styles, you can import individual component styles with `@layer mantine` directive:
import '@mantine/core/styles/UnstyledButton.layer.css';
import '@mantine/core/styles/Button.layer.css';
// ... other styles
[How CSS layers work](#how-css-layers-work)
--------------------------------------------
CSS rules within a layer are grouped together and applied before rules without a layer. This means that even if you do not have control over styles import order, you can still override Mantine styles with regular styles.
// ✅ If your styles are not wrapped in @layer directive,
// they will be applied after Mantine styles
import classes from './Demo.module.css';
import '@mantine/core/styles.layer.css';
CSS layers are also useful if you want to combine Mantine components with other libraries which also provide styles. You can use `@layer` directive to control the order of styles:
@layer base, mantine, components;
In this example, Mantine styles will take precedence over other library `base` styles, but other library `components` styles will take precedence over Mantine component styles.
As of September 2023, CSS layers are supported in all modern browsers and have [90% browser support](https://caniuse.com/css-cascade-layers)
.
[Loading styles from CDN](#loading-styles-from-cdn)
----------------------------------------------------
You can also load Mantine styles from unpkg CDN. Note that in this case it is recommended to specify exact version of `@mantine/*` packages both in your `package.json` and in CDN links.
Styles on unpkg CDN are available for all Mantine packages that export styles.
[Previous\
\
Styles overview](/styles/styles-overview/)
[Next\
\
CSS files list](/styles/css-files-list/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Vanilla extract | Mantine
Vanilla extract integration
===========================
[Vanilla extract](https://vanilla-extract.style/)
is a TypeScript CSS preprocessor that generates static CSS files at build time. It is a great alternative to [CSS Modules](/styles/css-modules/)
if you prefer to write your styles in TypeScript.
[Vanilla extract vs CSS Modules](#vanilla-extract-vs-css-modules)
------------------------------------------------------------------
[Vanilla extract](https://vanilla-extract.style/)
and [CSS Modules](/styles/css-modules/)
do the same thing, but with different syntax. Common features of [Vanilla extract](https://vanilla-extract.style/)
and [CSS Modules](/styles/css-modules/)
:
* Styles are generated at build time – no runtime and performance overhead
* Classes names are scoped to the styles file
Differences between [Vanilla extract](https://vanilla-extract.style/)
and [CSS Modules](/styles/css-modules/)
:
* Vanilla extract styles are type safe
* You can use any JavaScript/TypeScript code in Vanilla extract styles, including [color functions](/styles/color-functions/)
* With Vanilla extract you do not have access to [postcss-preset-mantine](/styles/postcss-preset/)
features like `light-dark` function and `hover` mixin. 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](https://nextjs.org/)
and [Vite](https://vitejs.dev/)
have plugins for Vanilla extract, but if you are using something more niche, you might need to configure it yourself.
Note that you can use both [Vanilla extract](https://vanilla-extract.style/)
and [CSS Modules](/styles/css-modules/)
in the same project, it will not cause any issues: performance will be the same and the bundle size will not be impacted.
[Installation](#installation)
------------------------------
Follow the [installation instructions](https://vanilla-extract.style/documentation/getting-started)
to install vanilla extract. Then install `@mantine/vanilla-extract` package, it exports `themeToVars` function to convert Mantine theme to CSS variables:
yarnnpm
yarn add @mantine/vanilla-extract
Expand code
[Templates](#templates)
------------------------
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-vanilla-extract-template
Next.js template with Vanilla extract example | [Use template](https://github.com/mantinedev/next-vanilla-extract-template) |
| | vite-vanilla-extract-template
Vite template with Vanilla extract example | [Use template](https://github.com/mantinedev/vite-vanilla-extract-template) |
[Theming](#theming)
--------------------
Vanilla extract provides [createTheme](https://vanilla-extract.style/documentation/theming/)
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](/theming/theme-object/)
properties are already exposed as CSS variables. Instead, use `themeToVars` function from `@mantine/vanilla-extract` package to create an object with CSS variables from Mantine theme:
// theme.ts
import { createTheme } from '@mantine/core';
// Do not forget to pass theme to MantineProvider
export const theme = createTheme({
fontFamily: 'serif',
primaryColor: 'cyan',
});
// theme.css.ts
import { theme } from './theme';
import { themeToVars } from '@mantine/vanilla-extract';
// CSS variables object, can be access in *.css.ts files
export const vars = themeToVars(theme);
[Styling](#styling)
--------------------
Import `vars` object in `*.css.ts` files to access Mantine [CSS variables](/styles/css-variables/)
:
// Demo.css.ts
import { style } from '@vanilla-extract/css';
import { vars } from './theme';
export const demo = style({
fontSize: vars.fontSizes.xl,
backgroundColor: vars.colors.red[5],
color: vars.colors.white,
});
[rem and em](#rem-and-em)
--------------------------
To convert px to [rem or em](/styles/rem/)
use `rem` and `em` functions from `@mantine/core` package:
// Demo.css.ts
import { style } from '@vanilla-extract/css';
import { rem } from '@mantine/core';
export const demo = style({
fontSize: rem(16),
'@media': {
[`(min-width: ${em(768)})`]: {
fontSize: rem(18),
},
},
});
[light and dark selectors](#light-and-dark-selectors)
------------------------------------------------------
`vars` object contains `lightSelector` and `darkSelector` properties which can be used to apply styles only in light or dark color scheme:
// Demo.css.ts
import { style } from '@vanilla-extract/css';
import { vars } from './theme';
export const demo = style({
fontSize: vars.fontSizes.xl,
selectors: {
[vars.lightSelector]: {
backgroundColor: vars.colors.red[5],
color: vars.colors.white,
},
[vars.darkSelector]: {
backgroundColor: vars.colors.blue[5],
color: vars.colors.white,
},
},
});
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 with `vars.darkSelector` (or vice versa):
// Demo.css.ts
import { style } from '@vanilla-extract/css';
import { vars } from './theme';
export const demo = style({
fontSize: vars.fontSizes.xl,
backgroundColor: vars.colors.red[5],
color: vars.colors.white,
selectors: {
[vars.darkSelector]: {
backgroundColor: vars.colors.blue[5],
color: vars.colors.white,
},
},
});
[largerThan and smallerThan](#largerthan-and-smallerthan)
----------------------------------------------------------
`vars` object contains `largerThan` and `smallerThan` properties which can be used in `@media` as a shorthand for `min-width` and `max-width`:
// Demo.css.ts
import { style } from '@vanilla-extract/css';
import { vars } from './theme';
export const demo = style({
fontSize: vars.fontSizes.sm,
'@media': {
// equivalent to `(min-width: 640px)` converted to em
// -> `(min-width: 40em)`
[vars.largerThan(640)]: {
fontSize: vars.fontSizes.md,
},
// equivalent to `(max-width: 640px)` converted to em
// -> `(max-width: 40em)`
[vars.smallerThan(640)]: {
fontSize: vars.fontSizes.xs,
},
// You can reference `theme.breakpoints` values
[vars.largerThan('sm')]: {
fontSize: vars.fontSizes.md,
},
},
});
[rtl selector](#rtl-selector)
------------------------------
Use `vars.rtlSelector` to apply styles only in rtl direction:
// Demo.css.ts
import { style } from '@vanilla-extract/css';
import { vars } from './theme';
export const demo = style({
paddingRight: vars.spacing.md,
selectors: {
[vars.rtlSelector]: {
paddingLeft: vars.spacing.md,
paddingRight: 0,
},
},
});
[Previous\
\
Usage with Sass](/styles/sass/)
[Next\
\
Global styles](/styles/global-styles/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Usage with Sass | Mantine
Usage with Sass
===============
This guide will explain how to use [Sass](https://sass-lang.com/)
in combination with [postcss-preset-mantine](/styles/postcss-preset/)
. Note that examples on mantine.dev website use only `postcss-preset-mantine` – you will need to modify them to use with Sass.
[Sass modules](#sass-modules)
------------------------------
You can use Sass modules the same way as [CSS modules](/styles/css-modules/)
:
* Use `*.module.scss`/`*.module.sass` extension for your files to enable modules
* Use `*.scss`/`*.sass` extension for global styles
[Usage with Vite](#usage-with-vite)
------------------------------------
Install `sass`:
yarnnpm
yarn add --dev sass-embedded
Expand code
Add mantine resources in your `vite.config.js` file:
import path from 'node:path';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [react()],
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler',
additionalData: `@use "${path.join(process.cwd(), 'src/_mantine').replace(/\\/g, '/')}" as mantine;`,
},
},
},
});
Create `src/_mantine.scss` file:
@use 'sass:math';
// Define variables for your breakpoints,
// values must be the same as in your theme
$mantine-breakpoint-xs: '36em';
$mantine-breakpoint-sm: '48em';
$mantine-breakpoint-md: '62em';
$mantine-breakpoint-lg: '75em';
$mantine-breakpoint-xl: '88em';
@function rem($value) {
@return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
}
@mixin light {
[data-mantine-color-scheme='light'] & {
@content;
}
}
@mixin dark {
[data-mantine-color-scheme='dark'] & {
@content;
}
}
@mixin hover {
@media (hover: hover) {
&:hover {
@content;
}
}
@media (hover: none) {
&:active {
@content;
}
}
}
@mixin smaller-than($breakpoint) {
@media (max-width: $breakpoint) {
@content;
}
}
@mixin larger-than($breakpoint) {
@media (min-width: $breakpoint) {
@content;
}
}
// Add direction mixins if you need rtl support
@mixin rtl {
[dir='rtl'] & {
@content;
}
}
@mixin ltr {
[dir='ltr'] & {
@content;
}
}
All done! you can now use breakpoint variables, `rem` function, `hover`, `light`/`dark` mixins:
// example.module.scss
.title {
// light-dark function is handled by PostCSS
color: light-dark(
var(--mantine-color-black),
var(--mantine-color-white)
);
font-size: mantine.rem(100px);
font-weight: 900;
letter-spacing: mantine.rem(-2px);
@include mantine.light {
background-color: red;
}
@include mantine.dark {
background-color: blue;
}
@include mantine.smaller-than(mantine.$mantine-breakpoint-md) {
font-size: mantine.rem(50px);
}
}
[Usage with Next.js](#usage-with-nextjs)
-----------------------------------------
Install `sass`:
yarnnpm
yarn add --dev sass-embedded
Expand code
Add mantine resources in your `next.config.mjs` file:
import path from 'node:path';
export default {
// ...other config
sassOptions: {
implementation: 'sass-embedded',
additionalData: `@use "${path.join(process.cwd(), '_mantine').replace(/\\/g, '/')}" as mantine;`,
},
};
Create `_mantine.scss` file in the root folder of your project:
@use 'sass:math';
// Define variables for your breakpoints,
// values must be the same as in your theme
$mantine-breakpoint-xs: '36em';
$mantine-breakpoint-sm: '48em';
$mantine-breakpoint-md: '62em';
$mantine-breakpoint-lg: '75em';
$mantine-breakpoint-xl: '88em';
@function rem($value) {
@return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
}
@mixin light {
[data-mantine-color-scheme='light'] & {
@content;
}
}
@mixin dark {
[data-mantine-color-scheme='dark'] & {
@content;
}
}
@mixin hover {
@media (hover: hover) {
&:hover {
@content;
}
}
@media (hover: none) {
&:active {
@content;
}
}
}
@mixin smaller-than($breakpoint) {
@media (max-width: $breakpoint) {
@content;
}
}
@mixin larger-than($breakpoint) {
@media (min-width: $breakpoint) {
@content;
}
}
// Add direction mixins if you need rtl support
@mixin rtl {
[dir='rtl'] & {
@content;
}
}
@mixin ltr {
[dir='ltr'] & {
@content;
}
}
All done! you can now use breakpoint variables, `rem` function, `hover`, `light`/`dark` mixins:
// example.module.scss
.title {
// light-dark function is handled by PostCSS
color: light-dark(
var(--mantine-color-black),
var(--mantine-color-white)
);
font-size: mantine.rem(100px);
font-weight: 900;
letter-spacing: mantine.rem(-2px);
@include mantine.light {
background-color: red;
}
@include mantine.dark {
background-color: blue;
}
@include mantine.smaller-than(mantine.$mantine-breakpoint-md) {
font-size: mantine.rem(50px);
}
}
[Previous\
\
Usage with Emotion](/styles/emotion/)
[Next\
\
Vanilla extract](/styles/vanilla-extract/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Default props | Mantine
Default props
=============
You can define default props for every Mantine component by setting `theme.components`. These props will be used by default by all components of your application unless they are overridden by component props:
Default buttonButton with props
Demo.tsx
import { MantineProvider, Button, Group, createTheme } from '@mantine/core';
const theme = createTheme({
components: {
Button: Button.extend({
defaultProps: {
color: 'cyan',
variant: 'outline',
},
}),
},
});
function Demo() {
return (
);
}
Expand code
[Default props with MantineThemeProvider](#default-props-with-mantinethemeprovider)
------------------------------------------------------------------------------------
You can also use `MantineThemeProvider` to define default props for a part of your application:
import {
Button,
createTheme,
MantineThemeProvider,
} from '@mantine/core';
const theme = createTheme({
components: {
Button: Button.extend({
defaultProps: {
color: 'cyan',
variant: 'outline',
},
}),
},
});
function Demo() {
return (
<>
{/* Part of the app with theme */}
{/* Another part without theme */}
);
}
[Default props for compound components](#default-props-for-compound-components)
--------------------------------------------------------------------------------
Some components like [Menu](/core/menu/)
and [Tabs](/core/tabs/)
have associated compound components: `Menu.Item`, `Tabs.List`, etc.. You can add default props to these components by omitting the dot from component name:
import {
createTheme,
MantineProvider,
Menu,
Tabs,
} from '@mantine/core';
const theme = createTheme({
components: {
MenuItem: Menu.Item.extend({
defaultProps: { color: 'red' },
}),
TabsList: Tabs.List.extend({
defaultProps: {
justify: 'center',
},
}),
},
});
function Demo() {
return (
{/* Your app here */}
);
}
[useProps hook](#useprops-hook)
--------------------------------
You can use `useProps` hook to add default props support to any custom component. `useProps` accepts three arguments:
* component name (string) – it is used to connect component with theme
* `defaultProps` – default props on component level – these props are used when default props are not defined on theme
* `props` – props passed to component
Default color
Provider color
Prop color
Demo.tsx
import { useProps, MantineThemeProvider, createTheme } from '@mantine/core';
interface CustomComponentProps {
color?: string;
children?: React.ReactNode;
}
const defaultProps: Partial = {
color: 'red',
};
function CustomComponent(props: CustomComponentProps) {
const { color, children } = useProps('CustomComponent', defaultProps, props);
return
);
}
Expand code
[withProps function](#withprops-function)
------------------------------------------
All Mantine components have `withProps` static function that can be used to add default props to the component:
import { IMaskInput } from 'react-imask';
import { Button, InputBase } from '@mantine/core';
const LinkButton = Button.withProps({
component: 'a',
target: '_blank',
rel: 'noreferrer',
variant: 'subtle',
});
const PhoneInput = InputBase.withProps({
mask: '+7 (000) 000-0000',
component: IMaskInput,
label: 'Your phone number',
placeholder: 'Your phone number',
});
function Demo() {
return (
<>
{/* You can pass additional props to components created with `withProps` */}
Mantine website
{/* Component props override default props defined in `withProps` */}
);
}
[Previous\
\
Typography](/theming/typography/)
[Next\
\
Styles overview](/styles/styles-overview/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Global styles | Mantine
Global styles
=============
`@mantine/core` package includes some global styles that are required for components to work correctly. If you override these styles, some components might not work as expected.
Global styles are automatically imported with:
import '@mantine/core/styles.css';
[CSS reset](#css-reset)
------------------------
`@mantine/core` package includes minimal CSS reset – it includes only basic styles required for components to work in modern browsers. If you need to support older browsers, you can additionally include [normalize.css](https://necolas.github.io/normalize.css/)
or any other CSS reset of your choice.
body {
margin: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
input,
button,
textarea,
select {
font: inherit;
}
button,
select {
text-transform: none;
}
[Body and :root elements styles](#body-and-root-elements-styles)
-----------------------------------------------------------------
`@mantine/core` package includes the following `body` and `:root` elements styles:
:root {
color-scheme: var(--mantine-color-scheme);
}
body {
font-family: var(--mantine-font-family);
font-size: var(--mantine-font-size-md);
line-height: var(--mantine-line-height);
background-color: var(--mantine-color-body);
color: var(--mantine-color-text);
-webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
-moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
}
[Static classes](#static-classes)
----------------------------------
`@mantine/core` package includes the following static classes:
* `mantine-active` – contains `:active` styles
* `mantine-focus-auto` – contains `:focus-visible` styles
* `mantine-focus-always` – contains `:focus` styles
* `mantine-focus-never` – removes default browser focus ring
* `mantine-visible-from-{breakpoint}` – shows element when screen width is greater than breakpoint, for example `mantine-visible-from-sm`
* `mantine-hidden-from-{breakpoint}` – hides element when screen width is greater than breakpoint, for example `mantine-hidden-from-sm`
You can use these classes with any components or elements:
Focus autoFocus alwaysFocus neverActive
Demo.tsx
import { Group } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
[Add global styles in your application](#add-global-styles-in-your-application)
--------------------------------------------------------------------------------
It is recommended to use [CSS modules](/styles/css-modules/)
to apply styles to Mantine components with `className` prop or with [Styles API](/styles/styles-api/)
. CSS modules files names usually end with `.module.css`, if you want to add global styles to your application, create a file with `.css` extension but without `.module` part, for example `global.css`.
In global `.css` files you can reference all Mantine [CSS variables](/styles/css-variables/)
and change styles of ``, `:root` and other elements. For example, to change body background-color:
body {
background-color: var(--mantine-color-red-filled);
}
[Previous\
\
Vanilla extract](/styles/vanilla-extract/)
[Next\
\
CSS variables](/styles/css-variables/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# rem, em and px units | Mantine
rem, em and px units
====================
[rem units](#rem-units)
------------------------
All Mantine components use `rem` units to apply size styles (`margin`, `padding`, `width`, etc.). By default, `1rem` is considered to be `16px` as it is a default setting in most browsers. All components scale based on the user's browser font-size settings or font-size of `html`/`:root`.
Demo.tsx
import { Slider } from '@mantine/core';
function Demo() {
return (
{
document.documentElement.style.fontSize = `${value}%`;
}}
/>
);
}
Expand code
[rem units scaling](#rem-units-scaling)
----------------------------------------
If you want to change font-size of `:root`/`html` element and preserve Mantine components sizes, set `scale` on [theme](/theming/theme-object/)
to the value of `1 / htmlFontSize`.
For example, if you set `html` font-size to `10px` and want to scale Mantine components accordingly, you need to set `scale` to `1 / (10 / 16)` (16 – default font-size) = `1 / 0.625` = `1.6`:
:root {
font-size: 10px;
}
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({
scale: 1.6,
});
function Demo() {
return (
{/* Your app here */}
);
}
[em units](#em-units)
----------------------
`em` units are used in media queries the same way as `rem` units, but they are not affected by font-size specified on `html`/`:root` element. `1em` is considered to be `16px`.
[px conversions](#px-conversions)
----------------------------------
You can use numbers in some Mantine components props. Numbers are treated as `px` and converted to `rem`, for example:
import { ColorSwatch } from '@mantine/core';
function DemoPx() {
// Specify ColorSwatch size in px, it will be automatically converted to rem
// Width and height of ColorSwatch in this case will be 32px / 16 = 2rem
return ;
}
function DemoRem() {
// This demo will have the same size as previous one
return ;
}
The same conversion happens in [style props](/styles/style-props/)
:
import { Box } from '@mantine/core';
function Demo() {
// width: calc(2rem * var(--mantine-scale))
// height: calc(1rem * var(--mantine-scale))
return ;
}
[rem and em function](#rem-and-em-function)
--------------------------------------------
`@mantine/core` package exports `rem` and `em` function that can be used to convert `px` into `rem`/`em`:
import { em, rem } from '@mantine/core';
// numbers and values in px are converted to rem
rem(32); // -> calc(2rem * var(--mantine-scale))
em(32); // -> 2em
rem('16px'); // -> calc(1rem * var(--mantine-scale))
em('16px'); // -> 1em
rem('2rem'); // -> calc(2rem * var(--mantine-scale))
em('2rem'); // -> 2rem
rem('50%'); // -> 50%
em('50%'); // -> 50%
rem('5vh'); // -> 5vh
em('5vh'); // -> 5vh
// mixed values are converted to rem
rem('16px 2rem'); // -> calc(1rem * var(--mantine-scale)) calc(2rem * var(--mantine-scale))
[Convert rem to px](#convert-rem-to-px)
----------------------------------------
To convert `rem`/`em` to `px` use `px` function exported from `@mantine/core`:
import { px } from '@mantine/core';
px('2rem'); // -> 32
px('10rem'); // -> 160
[rem/em functions in css files](#remem-functions-in-css-files)
---------------------------------------------------------------
You can use `rem` and `em` function in [css files](/styles/css-modules/)
if [postcss-preset-mantine](/styles/postcss-preset/)
is installed:
.demo {
font-size: rem(16px);
@media (min-width: em(320px)) {
font-size: rem(32px);
}
}
[Convert px to rem automatically in css files](#convert-px-to-rem-automatically-in-css-files)
----------------------------------------------------------------------------------------------
To convert `px` to `rem` automatically in css files, enable `autoRem` option in [postcss-preset-mantine](/styles/postcss-preset/)
configuration:
module.exports = {
plugins: {
'postcss-preset-mantine': {
autoRem: true,
},
},
};
[Previous\
\
CSS variables list](/styles/css-variables-list/)
[Next\
\
style prop](/styles/style/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# CSS files list | Mantine
CSS files list
==============
This page contains a list of CSS files that you can import from `@mantine/core` package as a replacement for `@mantine/core/styles.css`.
[Components dependencies](#components-dependencies)
----------------------------------------------------
Some components require additional styles to work properly. For example, [Button](/core/button/)
component is based on [UnstyledButton](/core/unstyled-button/)
. If you want to use [Button](/core/button/)
, you need to import styles for `UnstyledButton` as well.
import '@mantine/core/styles/UnstyledButton.css';
import '@mantine/core/styles/Button.css';
Some components like [Select](/core/select/)
do not have any styles on their own – they are built on top of other components. To find out which components are used in a particular component, check the component source code.
If you are not sure which components are used in a particular component, you can import all styles for components that are reused in other components:
import '@mantine/core/styles/ScrollArea.css';
import '@mantine/core/styles/UnstyledButton.css';
import '@mantine/core/styles/VisuallyHidden.css';
import '@mantine/core/styles/Paper.css';
import '@mantine/core/styles/Popover.css';
import '@mantine/core/styles/CloseButton.css';
import '@mantine/core/styles/Group.css';
import '@mantine/core/styles/Loader.css';
import '@mantine/core/styles/Overlay.css';
import '@mantine/core/styles/ModalBase.css';
import '@mantine/core/styles/Input.css';
import '@mantine/core/styles/InlineInput.css';
import '@mantine/core/styles/Flex.css';
import '@mantine/core/styles/FloatingIndicator.css';
import '@mantine/core/styles/ActionIcon.css';
[Global styles](#global-styles)
--------------------------------
All Mantine components depend on global styles, you need to import them before all other styles:
import '@mantine/core/styles/global.css';
[Import order](#import-order)
------------------------------
It is important to keep correct styles import order. For example, if you want to use [Button](/core/button/)
component, you need to import styles for [UnstyledButton](/core/unstyled-button/)
first and then import styles for [Button](/core/button/)
.
// ✅ Correct order – Button styles will override UnstyledButton styles
import '@mantine/core/styles/UnstyledButton.css';
import '@mantine/core/styles/Button.css';
// ❌ Incorrect order – UnstyledButton styles will override Button styles
import '@mantine/core/styles/Button.css';
import '@mantine/core/styles/UnstyledButton.css';
[Files list](#files-list)
--------------------------
| Component | Import |
| --- | --- |
| global | `import '@mantine/core/styles/global.css';` |
| Accordion | `import '@mantine/core/styles/Accordion.css';` |
| ActionIcon | `import '@mantine/core/styles/ActionIcon.css';` |
| Affix | `import '@mantine/core/styles/Affix.css';` |
| Alert | `import '@mantine/core/styles/Alert.css';` |
| Anchor | `import '@mantine/core/styles/Anchor.css';` |
| AngleSlider | `import '@mantine/core/styles/AngleSlider.css';` |
| AppShell | `import '@mantine/core/styles/AppShell.css';` |
| AspectRatio | `import '@mantine/core/styles/AspectRatio.css';` |
| Avatar | `import '@mantine/core/styles/Avatar.css';` |
| BackgroundImage | `import '@mantine/core/styles/BackgroundImage.css';` |
| Badge | `import '@mantine/core/styles/Badge.css';` |
| Blockquote | `import '@mantine/core/styles/Blockquote.css';` |
| Breadcrumbs | `import '@mantine/core/styles/Breadcrumbs.css';` |
| Burger | `import '@mantine/core/styles/Burger.css';` |
| Button | `import '@mantine/core/styles/Button.css';` |
| Card | `import '@mantine/core/styles/Card.css';` |
| Center | `import '@mantine/core/styles/Center.css';` |
| Checkbox | `import '@mantine/core/styles/Checkbox.css';` |
| Chip | `import '@mantine/core/styles/Chip.css';` |
| CloseButton | `import '@mantine/core/styles/CloseButton.css';` |
| Code | `import '@mantine/core/styles/Code.css';` |
| ColorInput | `import '@mantine/core/styles/ColorInput.css';` |
| ColorPicker | `import '@mantine/core/styles/ColorPicker.css';` |
| ColorSwatch | `import '@mantine/core/styles/ColorSwatch.css';` |
| Combobox | `import '@mantine/core/styles/Combobox.css';` |
| Container | `import '@mantine/core/styles/Container.css';` |
| Dialog | `import '@mantine/core/styles/Dialog.css';` |
| Divider | `import '@mantine/core/styles/Divider.css';` |
| Drawer | `import '@mantine/core/styles/Drawer.css';` |
| Fieldset | `import '@mantine/core/styles/Fieldset.css';` |
| Flex | `import '@mantine/core/styles/Flex.css';` |
| FloatingIndicator | `import '@mantine/core/styles/FloatingIndicator.css';` |
| Grid | `import '@mantine/core/styles/Grid.css';` |
| Group | `import '@mantine/core/styles/Group.css';` |
| Image | `import '@mantine/core/styles/Image.css';` |
| Indicator | `import '@mantine/core/styles/Indicator.css';` |
| InlineInput | `import '@mantine/core/styles/InlineInput.css';` |
| Input | `import '@mantine/core/styles/Input.css';` |
| Kbd | `import '@mantine/core/styles/Kbd.css';` |
| List | `import '@mantine/core/styles/List.css';` |
| Loader | `import '@mantine/core/styles/Loader.css';` |
| LoadingOverlay | `import '@mantine/core/styles/LoadingOverlay.css';` |
| Mark | `import '@mantine/core/styles/Mark.css';` |
| Menu | `import '@mantine/core/styles/Menu.css';` |
| Modal | `import '@mantine/core/styles/Modal.css';` |
| ModalBase | `import '@mantine/core/styles/ModalBase.css';` |
| NavLink | `import '@mantine/core/styles/NavLink.css';` |
| Notification | `import '@mantine/core/styles/Notification.css';` |
| NumberInput | `import '@mantine/core/styles/NumberInput.css';` |
| Overlay | `import '@mantine/core/styles/Overlay.css';` |
| Pagination | `import '@mantine/core/styles/Pagination.css';` |
| Paper | `import '@mantine/core/styles/Paper.css';` |
| PasswordInput | `import '@mantine/core/styles/PasswordInput.css';` |
| Pill | `import '@mantine/core/styles/Pill.css';` |
| PillsInput | `import '@mantine/core/styles/PillsInput.css';` |
| PinInput | `import '@mantine/core/styles/PinInput.css';` |
| Popover | `import '@mantine/core/styles/Popover.css';` |
| Progress | `import '@mantine/core/styles/Progress.css';` |
| Radio | `import '@mantine/core/styles/Radio.css';` |
| Rating | `import '@mantine/core/styles/Rating.css';` |
| RingProgress | `import '@mantine/core/styles/RingProgress.css';` |
| ScrollArea | `import '@mantine/core/styles/ScrollArea.css';` |
| SegmentedControl | `import '@mantine/core/styles/SegmentedControl.css';` |
| SemiCircleProgress | `import '@mantine/core/styles/SemiCircleProgress.css';` |
| SimpleGrid | `import '@mantine/core/styles/SimpleGrid.css';` |
| Skeleton | `import '@mantine/core/styles/Skeleton.css';` |
| Slider | `import '@mantine/core/styles/Slider.css';` |
| Spoiler | `import '@mantine/core/styles/Spoiler.css';` |
| Stack | `import '@mantine/core/styles/Stack.css';` |
| Stepper | `import '@mantine/core/styles/Stepper.css';` |
| Switch | `import '@mantine/core/styles/Switch.css';` |
| Table | `import '@mantine/core/styles/Table.css';` |
| TableOfContents | `import '@mantine/core/styles/TableOfContents.css';` |
| Tabs | `import '@mantine/core/styles/Tabs.css';` |
| Text | `import '@mantine/core/styles/Text.css';` |
| ThemeIcon | `import '@mantine/core/styles/ThemeIcon.css';` |
| Timeline | `import '@mantine/core/styles/Timeline.css';` |
| Title | `import '@mantine/core/styles/Title.css';` |
| Tooltip | `import '@mantine/core/styles/Tooltip.css';` |
| Tree | `import '@mantine/core/styles/Tree.css';` |
| TypographyStylesProvider | `import '@mantine/core/styles/TypographyStylesProvider.css';` |
| UnstyledButton | `import '@mantine/core/styles/UnstyledButton.css';` |
| VisuallyHidden | `import '@mantine/core/styles/VisuallyHidden.css';` |
| CheckboxIndicator | `import '@mantine/core/styles/CheckboxIndicator.css';` |
| CheckboxCard | `import '@mantine/core/styles/CheckboxCard.css';` |
| RadioCard | `import '@mantine/core/styles/RadioCard.css';` |
| RadioIndicator | `import '@mantine/core/styles/RadioIndicator.css';` |
[Previous\
\
Mantine styles](/styles/mantine-styles/)
[Next\
\
CSS modules](/styles/css-modules/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# style prop | Mantine
Style prop
==========
All Mantine components that have root element support `style` prop. It works similar to React `style` prop, but with some additional features.
[Style object](#style-object)
------------------------------
You can pass a style object to the `style` prop – in this case it works the same way as React `style` prop. You can use Mantine [CSS variables](/styles/css-variables/)
in style object the same way as in [.css files](/styles/css-modules/)
.
import { Box, rem } from '@mantine/core';
function Demo() {
return (
);
}
[Define CSS variables in style prop](#define-css-variables-in-style-prop)
--------------------------------------------------------------------------
You can define CSS variables in the style prop. Note that it only works with Mantine components:
import { Box } from '@mantine/core';
function Demo() {
return (
);
}
[Style function](#style-function)
----------------------------------
You can pass a style function to the `style` prop – in this case it will be called with [theme](/theming/theme-object/)
. It is useful when you need to access [theme](/theming/theme-object/)
properties that are not exposed as [CSS variables](/styles/css-variables/)
, for example, properties from `theme.other`.
import { Box } from '@mantine/core';
function Demo() {
return (
({
color: theme.colors.red[5],
fontSize: theme.fontSizes.xs,
})}
/>
);
}
[Styles array](#styles-array)
------------------------------
You can pass an array of style objects and/or functions to `style` prop – in this case, all styles will be merged into one object. It is useful when you want to create a wrapper around Mantine component, add inline styles and keep the option to pass `style` prop to it.
import { Box, MantineStyleProp } from '@mantine/core';
interface DemoProps {
style?: MantineStyleProp;
}
function Demo({ style }: DemoProps) {
return ;
}
[Previous\
\
rem, em and px units](/styles/rem/)
[Next\
\
Responsive styles](/styles/responsive/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# data-* attributes | Mantine
data attributes
===============
Mantine components use `data-*` attributes to apply styles. These attributes are used as a modifier to apply styles based on component state. General rule of Mantine components styles: one class with shared styles and any number of `data-*` attributes as modifiers.
Example of applying styles with `data-*` attributes:
12Send files3Send files
Demo.module.cssDemo.tsx
.root {
border-top-left-radius: var(--mantine-radius-xl);
border-bottom-left-radius: var(--mantine-radius-xl);
padding-left: 4px;
/* The following styles will be applied only when button is disabled */
&[data-disabled] {
/* You can use Mantine PostCSS mixins inside data attributes */
@mixin light {
border: 1px solid var(--mantine-color-gray-2);
}
@mixin dark {
border: 1px solid var(--mantine-color-dark-4);
}
/* You can target child elements that are inside .root[data-disabled] */
& .section[data-position='left'] {
opacity: 0.6;
}
}
}
.section {
/* Apply styles only to left section */
&[data-position='left'] {
--section-size: calc(var(--button-height) - 8px);
background-color: var(--mantine-color-body);
color: var(--mantine-color-text);
height: var(--section-size);
width: var(--section-size);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--mantine-radius-xl);
}
&[data-position='right'] {
@mixin rtl {
transform: rotate(180deg);
}
}
}
Expand code
[data attributes values](#data-attributes-values)
--------------------------------------------------
Most of the `data-*` attributes do not have associated values, they represent boolean state or a feature. For example, when the `disabled` prop on [Button](/core/button/)
is set, the `data-disabled` attribute is added to the `` element:
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
Will output the following HTML:
You can then use this attribute to apply styles to the disabled button:
.my-button {
color: var(--mantine-color-black);
&[data-disabled] {
color: var(--mantine-color-gray-5);
}
}
When the `disabled` prop is not set, then the `data-disabled` attribute is not added to the button:
In some cases, `data-*` attributes have associated values, for example, a [Button](/core/button/)
component's `section` element has an associated `data-position` attribute which can be `left` or `right`. The following example will render two `section` elements, one with `data-position="left"` and another with `data-position="right"`:
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
Will output the following HTML:
You can then use this attribute to apply styles to the left and right sections:
.section {
/* Styles applied to both sections */
width: 2rem;
/* Styles applied only to left section */
&[data-position='left'] {
background-color: red;
}
/* Styles applied only to right section */
&[data-position='right'] {
background-color: blue;
}
}
[Components data attributes documentation](#components-data-attributes-documentation)
--------------------------------------------------------------------------------------
Every component that uses `data-*` attributes has a dedicated section under the `Styles API` tab.
[Button](/core/button/)
component `data-*` attributes table:
| Selector | Attribute | Condition | Value |
| --- | --- | --- | --- |
| root | data-disabled | `disabled` prop is set | – |
| root, label | data-loading | `loading` prop is set | – |
| root | data-block | `fullWidth` prop is set | – |
| root | data-with-left-section | `leftSection` is set | – |
| root | data-with-right-section | `rightSection` is set | – |
| section | data-position | – | Section position: left or right |
How to read the table:
* `selector` column – [Styles API](/styles/styles-api/)
selector (or multiple selectors) to which data attribute is added
* `attribute` column – data attribute name
* `condition` column – condition based on which the data attribute is added to the element
* `value` column – value of the data attribute
[mod prop](#mod-prop)
----------------------
All components support `mod` prop, which allows adding data attributes to the root element:
import { Box } from '@mantine/core';
;
// ->
;
// ->
;
// ->
;
// ->
;
// ->
[Previous\
\
Styles API](/styles/styles-api/)
[Next\
\
Variants and sizes](/styles/variants-sizes/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Unstyled / headless | Mantine
Unstyled components
===================
[Using Mantine as a headless UI library](#using-mantine-as-a-headless-ui-library)
----------------------------------------------------------------------------------
You can use Mantine as a headless UI library. To do that, simply do not import `@mantine/*/styles.css` in your application. Then you will be able to apply styles to Mantine components using [Styles API](/styles/styles-api/)
with a styling solution of your choice.
[HeadlessMantineProvider](#headlessmantineprovider)
----------------------------------------------------
`HeadlessMantineProvider` is an alternative to [MantineProvider](/theming/mantine-provider/)
that should be used when you want to use Mantine as a headless UI library. It removes all features that are related to Mantine styles:
* Mantine classes are not applied to components
* Inline CSS variables are not added with `style` attribute
* All color scheme related features are removed
* Global styles are not generated
Limitations of `HeadlessMantineProvider`:
* [Color scheme switching](/theming/color-schemes/)
will not work. If your application has a dark mode, you will need to implement it on your side.
* Props that are related to styles in all components (`color`, `radius`, `size`, etc.) will have no effect.
* Some components that rely on styles will become unusable ([Grid](/core/grid/)
, [SimpleGrid](/core/simple-grid/)
, [Container](/core/container/)
, etc.).
* `lightHidden`/`darkHidden`, `visibleFrom`/`hiddenFrom` props will not work.
* [Style props](/styles/style-props/)
will work only with explicit values, for example `mt="xs"` will not work, but `mt={5}` will.
To use `HeadlessMantineProvider`, follow [getting started guide](/getting-started/)
and replace `MantineProvider` with `HeadlessMantineProvider`. Note that you do not need to use [ColorSchemeScript](/theming/color-schemes/#colorschemescript)
in your application, it will not have any effect, you can ignore this part of the guide.
import { HeadlessMantineProvider } from '@mantine/core';
function App() {
return (
{/* Your application */}
);
}
[unstyled prop](#unstyled-prop)
--------------------------------
Most of Mantine components support `unstyled` prop that removes library styles from the component and allows you to style it from scratch. Note that `unstyled` prop is not supported by compound components (`Tabs.Tab`, `Menu.Dropdown`, `Accordion.Control`, etc.) – it only works on root component (`Tabs`, `Menu`, `Accordion`, etc.).
Unstyled [Tabs](/core/tabs/)
component:
ChatGalleryAccount
Chat panel
Gallery panel
Account panel
Demo.tsx
import { Tabs } from '@mantine/core';
function Demo() {
return (
ChatGalleryAccountChat panelGallery panelAccount panel
);
}
Expand code
> **Choosing between unstyled prop and headless components**
>
> `unstyled` prop is useful when you want to remove library styles from a single component, but keep styles for other components. For example, if [Tabs](/core/tabs/)
> component does not meet your design system requirements, but all other components do, you can use `unstyled` prop to remove styles from Tabs and style it from scratch, while keeping all other components styled with Mantine styles.
>
> Note that `unstyled` prop does not remove Mantine library styles from your `.css` bundle – it only does not apply them to component with `unstyled` prop.
[Previous\
\
Variants and sizes](/styles/variants-sizes/)
[Next\
\
Style props](/styles/style-props/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Usage with Emotion | Mantine
Usage with Emotion
==================
Prior to version 7.0 Mantine used [Emotion](https://emotion.sh/)
as a styling solution. It was replaced with [CSS modules](/styles/css-modules/)
in version 7.0, but you can still use Emotion with Mantine if you prefer it over CSS modules.
Note that `createStyles` function, `sx` and `styles` prop work different from the same features in [version 6.x](https://v6.mantine.dev/styles/create-styles/)
. If you are planning to upgrade from version 6.x to 7.x, follow the [migration guide](/guides/6x-to-7x/)
.
`@mantine/emotion` package is compatible with `@mantine/core` 7.9.0 and higher. Before installing, make sure that you are using the latest version of all `@mantine/*` packages.
[Caveats and support](#caveats-and-support)
--------------------------------------------
[Emotion](https://emotion.sh/)
is a runtime CSS-in-JS library – styles are generated and injected into the DOM at runtime. This approach has some limitations:
* **Limited server-side rendering support** – modern frameworks like Next.js with app router do not fully support emotion or require additional configuration.
* **Runtime overhead** – styles are generated and injected at runtime, which can lead to performance issues on pages with a lot of components.
* **Additional bundle size** – your bundle will include `@emotion/react` (21.2kB minified), `@mantine/emotion` (~2kb minified) and all styles that you use in your components.
`@mantine/emotion` package can be used with the following frameworks:
* **Vite** and **CRA** with basic setup
* **Next.js with pages router** with additional setup for server side rendering provided by the package
* **Next.js with app router** with additional setup for server side rendering provided by Emotion
* Any other framework that does not require server-side rendering with basic setup
There is no official support (the package probably can be used but it's not tested and documentation is not provided) for:
* **Remix**
* **Gatsby**
* **Redwood**
* Any other framework that has server-side rendering
Note that Emotion is not recommended for new projects, if you are starting a new project with Mantine, consider using [CSS modules](/styles/css-modules/)
instead.
[Usage with Vite](#usage-with-vite)
------------------------------------
[View example repository with full setup](https://github.com/mantinedev/vite-min-template/tree/emotion)
Install dependencies:
yarnnpm
yarn add @mantine/emotion @emotion/react @emotion/cache @emotion/serialize @emotion/utils
Expand code
Create `emotion.d.ts` file in `src` directory to add types support for `sx` and `styles` props:
import '@mantine/core';
import type { EmotionStyles, EmotionSx } from '@mantine/emotion';
declare module '@mantine/core' {
export interface BoxProps {
sx?: EmotionSx;
styles?: EmotionStyles;
}
}
Wrap your application with `MantineEmotionProvider` and add `emotionTransform` to `MantineProvider`:
import '@mantine/core/styles.css';
import { MantineProvider } from '@mantine/core';
import {
emotionTransform,
MantineEmotionProvider,
} from '@mantine/emotion';
export default function App() {
return (
App
);
}
Done! You can now use `sx`, `styles` props and `createStyles` in your application:
import { Box } from '@mantine/core';
function Demo() {
return (
({
padding: 40,
[u.light]: {
backgroundColor: theme.colors.blue[0],
color: theme.colors.blue[9],
'&:hover': {
backgroundColor: theme.colors.blue[1],
},
},
})}
>
Box with emotion sx prop
);
}
[Usage with Next.js pages router](#usage-with-nextjs-pages-router)
-------------------------------------------------------------------
[View example repository with full setup](https://github.com/mantinedev/next-pages-min-template/tree/emotion)
Install dependencies:
yarnnpm
yarn add @mantine/emotion @emotion/react @emotion/cache @emotion/serialize @emotion/utils @emotion/server
Expand code
Create `emotion` folder with `cache.ts` and `emotion.d.ts` files.
`cache.ts` file:
import createCache from '@emotion/cache';
export const emotionCache = createCache({ key: 'css' });
`emotion.d.ts` file:
import '@mantine/core';
import type { EmotionStyles, EmotionSx } from '@mantine/emotion';
declare module '@mantine/core' {
export interface BoxProps {
sx?: EmotionSx;
styles?: EmotionStyles;
}
}
Add the following content to `pages/_document.tsx` file:
import NextDocument, {
Head,
Html,
Main,
NextScript,
} from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import { ColorSchemeScript } from '@mantine/core';
import { createGetInitialProps } from '@mantine/emotion';
// Import cache created in the previous step
import { emotionCache } from '../emotion/cache';
export default function Document() {
return (
);
}
const stylesServer = createEmotionServer(emotionCache);
Document.getInitialProps = createGetInitialProps(
NextDocument,
stylesServer
);
Add `MantineEmotionProvider` and `emotionTransform` to `pages/_app.tsx` file:
import '@mantine/core/styles.css';
import Head from 'next/head';
import { MantineProvider } from '@mantine/core';
import {
emotionTransform,
MantineEmotionProvider,
} from '@mantine/emotion';
import { emotionCache } from '../emotion/cache';
export default function App({ Component, pageProps }: any) {
return (
Mantine Template
);
}
Done! You can now use `sx`, `styles` props and `createStyles` in your application:
import { Box } from '@mantine/core';
function Demo() {
return (
({
padding: 40,
[u.light]: {
backgroundColor: theme.colors.blue[0],
color: theme.colors.blue[9],
'&:hover': {
backgroundColor: theme.colors.blue[1],
},
},
})}
>
Box with emotion sx prop
);
}
[Usage with Next.js app router](#usage-with-nextjs-app-router)
---------------------------------------------------------------
[View example repository with full setup](https://github.com/mantinedev/next-app-min-template/tree/emotion)
Install dependencies:
yarnnpm
yarn add @mantine/emotion @emotion/react @emotion/cache @emotion/serialize @emotion/utils @emotion/server
Expand code
Create `app/emotion.d.ts` file with the following content:
import '@mantine/core';
import type { EmotionStyles, EmotionSx } from '@mantine/emotion';
declare module '@mantine/core' {
export interface BoxProps {
sx?: EmotionSx;
styles?: EmotionStyles;
}
}
Create `app/EmotionRootStyleRegistry.tsx` file with the following content:
'use client';
import { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
export function RootStyleRegistry({
children,
}: {
children: React.ReactNode;
}) {
const [{ cache, flush }] = useState(() => {
const cache = createCache({ key: 'my' });
cache.compat = true;
const prevInsert = cache.insert;
let inserted: string[] = [];
cache.insert = (...args) => {
const serialized = args[1];
if (cache.inserted[serialized.name] === undefined) {
inserted.push(serialized.name);
}
return prevInsert(...args);
};
const flush = () => {
const prevInserted = inserted;
inserted = [];
return prevInserted;
};
return { cache, flush };
});
useServerInsertedHTML(() => {
const names = flush();
if (names.length === 0) return null;
let styles = '';
for (const name of names) {
styles += cache.inserted[name];
}
return (
);
});
return {children};
}
Add `RootStyleRegistry`, `MantineEmotionProvider` and `emotionTransform` to `app/layout.tsx`. It should look something like this:
import '@mantine/core/styles.css';
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
import {
emotionTransform,
MantineEmotionProvider,
} from '@mantine/emotion';
import { RootStyleRegistry } from './EmotionRootStyleRegistry';
export const metadata = {
title: 'Mantine Next.js template',
description: 'I am using Mantine with Next.js!',
};
export default function RootLayout({ children }: { children: any }) {
return (
{children}
);
}
Done! You can now use `sx`, `styles` props and `createStyles` in your application. Note that `'use client'` is required in most components that use `sx`, `styles` or `createStyles`:
'use client';
import { Box } from '@mantine/core';
export default function HomePage() {
return (
({
padding: 40,
[u.light]: {
backgroundColor: theme.colors.blue[0],
color: theme.colors.blue[9],
'&:hover': {
backgroundColor: theme.colors.blue[1],
},
},
})}
>
Box with emotion sx prop
);
}
[sx prop](#sx-prop)
--------------------
With the setup above you can use `sx` prop in all Mantine components. `sx` prop allows adding styles to the root element of the component. It accepts either a styles object or a function that receives theme, utilities and returns styles object:
import { Box, Button } from '@mantine/core';
function Demo() {
return (
<>
Box with object sx
);
}
[styles prop](#styles-prop)
----------------------------
`styles` prop works similar to `sx` prop, but it allows adding styles to all nested elements of the components that are specified in the Styles API table. `styles` prop accepts either an object of styles objects or a function that receives theme, component props, utilities and returns styles object:
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
[styles in theme](#styles-in-theme)
------------------------------------
You can add styles to Mantine components with [Styles API](/styles/styles-api/)
using Emotion with `styles` prop. Note that to avoid types collisions, you should not use `Component.extend` method and just pass component configuration object directly.
import { createTheme, MantineTheme, TextProps } from '@mantine/core';
import { EmotionHelpers } from '@mantine/emotion';
export const theme = createTheme({
components: {
Text: {
styles: (
theme: MantineTheme,
_props: TextProps,
u: EmotionHelpers
) => ({
root: {
[u.light]: {
color: theme.colors.blue[7],
},
},
}),
},
},
});
[createStyles](#createstyles)
------------------------------
`createStyles` function accepts a function to generate styles with [Emotion](https://emotion.sh/)
. The function receives 3 arguments that will be described more detailed in the following demos:
* `theme` – [Mantine theme object](/theming/theme-object/)
* `params` – object with additional parameters that can be passed to the function in `useStyles` hook
* `u` - object with utilities to generate selectors
`createStyles` function returns `useStyles` hook that should be called in the component that uses given styles:
createStyles demo
Demo.tsx
import { createStyles } from '@mantine/emotion';
const useStyles = createStyles((theme, _, u) => ({
wrapper: {
maxWidth: 400,
width: '100%',
height: 180,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginLeft: 'auto',
marginRight: 'auto',
borderRadius: theme.radius.sm,
// Use light and dark selectors to change styles based on color scheme
[u.light]: {
backgroundColor: theme.colors.gray[1],
},
[u.dark]: {
backgroundColor: theme.colors.dark[5],
},
// Reference theme.breakpoints in smallerThan and largerThan functions
[u.smallerThan('sm')]: {
// Child reference in nested selectors via ref
[`& .${u.ref('child')}`]: {
fontSize: theme.fontSizes.xs,
},
},
},
child: {
// Assign selector to a ref to reference it in other styles
ref: u.ref('child'),
padding: theme.spacing.md,
borderRadius: theme.radius.sm,
boxShadow: theme.shadows.md,
[u.light]: {
backgroundColor: theme.white,
color: theme.black,
},
[u.dark]: {
backgroundColor: theme.colors.dark[8],
color: theme.white,
},
},
}));
function Demo() {
const { classes } = useStyles();
return (
createStyles demo
);
}
Expand code
### [Pseudo-classes](#pseudo-classes)
You can add pseudo-classes the same way as in any css-preprocessor like Sass:
FirstSecondThird
Demo.tsx
import { createStyles } from '@mantine/emotion';
const useStyles = createStyles((theme) => ({
button: {
color: theme.white,
backgroundColor: theme.colors.blue[6],
border: 0,
borderRadius: theme.radius.md,
padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
cursor: 'pointer',
margin: theme.spacing.md,
// Use pseudo-classes just like you would in Sass
'&:hover': {
backgroundColor: theme.colors.blue[9],
},
'&:not(:first-of-type)': {
backgroundColor: theme.colors.violet[6],
// pseudo-classes can be nested
'&:hover': {
backgroundColor: theme.colors.violet[9],
},
},
},
}));
function Demo() {
const { classes } = useStyles();
return (
);
}
Expand code
### [Styles parameters](#styles-parameters)
You can receive any amount of parameters as second argument of `createStyles` function, latter you will need to pass those parameters as argument to `useStyles` hook:
blue button with 5 radiusviolet button with 50 radius
Demo.tsx
import { createStyles } from '@mantine/emotion';
interface ButtonProps {
color: 'blue' | 'violet';
radius: number;
}
const useStyles = createStyles((theme, { color, radius }: ButtonProps) => ({
button: {
color: theme.white,
backgroundColor: theme.colors[color][6],
borderRadius: radius,
padding: theme.spacing.md,
margin: theme.spacing.md,
border: 0,
cursor: 'pointer',
},
}));
function Button({ color, radius }: ButtonProps) {
const { classes } = useStyles({ color, radius });
return (
);
}
function Demo() {
return (
<>
);
}
Expand code
### [Composition and nested selectors](#composition-and-nested-selectors)
Since `createStyles` produces scoped class names you will need to create a reference to selector in order to get static selector. Use `u.ref` function to assign static selectors:
Hover container to change button color
Demo.tsx
import { createStyles } from '@mantine/emotion';
const useStyles = createStyles((theme, _, u) => ({
button: {
// assign reference to selector
ref: u.ref('button'),
// and add any other properties
backgroundColor: theme.colors.blue[6],
color: theme.white,
padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
borderRadius: theme.radius.md,
cursor: 'pointer',
border: 0,
},
container: {
display: 'flex',
justifyContent: 'center',
padding: theme.spacing.xl,
[u.light]: {
backgroundColor: theme.colors.gray[1],
},
[u.dark]: {
backgroundColor: theme.colors.dark[8],
},
// reference button with nested selector
[`&:hover .${u.ref('button')}`]: {
backgroundColor: theme.colors.violet[6],
},
},
}));
function Demo() {
const { classes } = useStyles();
return (
);
}
Expand code
### [Classes merging (cx function)](#classes-merging-cx-function)
To merge class names use `cx` function, it has the same api as [clsx](https://www.npmjs.com/package/clsx)
package.
**!important:** Do not use external libraries like [classnames](https://www.npmjs.com/package/classnames)
or [clsx](https://www.npmjs.com/package/clsx)
with class names created with `createStyles` function as it will produce styles collisions.
FirstSecond
Demo.tsx
import { useState } from 'react';
import { createStyles } from '@mantine/emotion';
const useStyles = createStyles((theme, _, u) => ({
button: {
border: 0,
borderRadius: theme.radius.md,
padding: theme.spacing.md,
cursor: 'pointer',
margin: theme.spacing.md,
lineHeight: 1,
[u.light]: {
backgroundColor: theme.colors.gray[1],
},
[u.dark]: {
backgroundColor: theme.colors.dark[5],
},
},
active: {
color: theme.white,
[u.light]: {
backgroundColor: theme.colors.blue[6],
},
[u.dark]: {
backgroundColor: theme.colors.blue[8],
},
},
}));
function Demo() {
const [active, setActive] = useState(0);
const { classes, cx } = useStyles();
return (
);
}
Expand code
### [Media queries](#media-queries)
You can use nested media queries like in Sass. Within query body you can use `theme.breakpoints` defined with [MantineProvider](/theming/mantine-provider/)
or just static values:
Demo.tsx
import { em, getBreakpointValue } from '@mantine/core';
import { createStyles } from '@mantine/emotion';
const useStyles = createStyles((theme, _, u) => ({
container: {
height: 100,
backgroundColor: theme.colors.blue[6],
// Media query with value from theme
[`@media (max-width: ${em(getBreakpointValue(theme.breakpoints.xl, theme.breakpoints) - 1)})`]: {
backgroundColor: theme.colors.pink[6],
},
// Simplify media query writing with theme functions
[u.smallerThan('lg')]: {
backgroundColor: theme.colors.yellow[6],
},
// Static media query
[`@media (max-width: ${em(800)})`]: {
backgroundColor: theme.colors.orange[6],
},
},
}));
function Demo() {
const { classes } = useStyles();
return ;
}
Expand code
### [Keyframes](#keyframes)
Keyframes demo
Demo.tsx
import { createStyles, keyframes } from '@mantine/emotion';
// Export animation to reuse it in other components
export const bounce = keyframes({
'from, 20%, 53%, 80%, to': { transform: 'translate3d(0, 0, 0)' },
'40%, 43%': { transform: 'translate3d(0, -30px, 0)' },
'70%': { transform: 'translate3d(0, -15px, 0)' },
'90%': { transform: 'translate3d(0, -4px, 0)' },
});
const useStyles = createStyles((theme) => ({
container: {
textAlign: 'center',
padding: theme.spacing.xl,
animation: `${bounce} 3s ease-in-out infinite`,
},
}));
function Demo() {
const { classes } = useStyles();
return
Keyframes demo
;
}
Expand code
[Utilities](#utilities)
------------------------
`sx`, `styles` and `createStyles` callback functions receive `u` object with utilities to generate selectors. `u` object contains the following properties:
const u = {
light: '[data-mantine-color-scheme="light"] &',
dark: '[data-mantine-color-scheme="dark"] &',
rtl: '[dir="rtl"] &',
ltr: '[dir="ltr"] &',
notRtl: '[dir="ltr"] &',
notLtr: '[dir="rtl"] &',
ref: getStylesRef,
smallerThan: (breakpoint: MantineBreakpoint | number) =>
`@media (max-width: ${em(getBreakpointValue(theme, breakpoint) - 0.1)})`,
largerThan: (breakpoint: MantineBreakpoint | number) =>
`@media (min-width: ${em(getBreakpointValue(theme, breakpoint))})`,
};
All utilities except `ref` can be used as selectors in styles object:
const styles = {
root: {
[u.dark]: { color: 'white' },
[u.rtl]: { padding: 10 },
[u.smallerThan('md')]: { lineHeight: 20 },
},
};
[Previous\
\
PostCSS preset](/styles/postcss-preset/)
[Next\
\
Usage with Sass](/styles/sass/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---
# Button | Mantine
Button
======
Button component to render button or link
Import
`import { Button } from '@mantine/core';`
Source
[View source code](https://github.com/mantinedev/mantine/blob/master/packages/@mantine/core/src/components/Button/Button.tsx)
Docs
[Edit this page](https://github.com/mantinedev/mantine/blob/master/apps/mantine.dev/src/pages/core/button.mdx)
Package
[@mantine/core](https://www.npmjs.com/package/@mantine/core)
DocumentationPropsStyles API
[Usage](#usage)
----------------
Button
Variant
DefaultFilledLightOutlineSubtleTransparentWhite
Color
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
Demo.tsx
import { Button } from '@mantine/core';
function Demo() {
return ;
}
Expand code
[Full width](#full-width)
--------------------------
If `fullWidth` prop is set `Button` will take 100% of parent width:
Full width button
Demo.tsx
import { Button } from '@mantine/core';
function Demo() {
return ;
}
Expand code
[Left and right sections](#left-and-right-sections)
----------------------------------------------------
`leftSection` and `rightSection` allow adding icons or any other element to the left and right side of the button. When a section is added, padding on the corresponding side is reduced.
Note that `leftSection` and `rightSection` are flipped in [RTL](/styles/rtl/)
mode (`leftSection` is displayed on the right and `rightSection` is displayed on the left).
GalleryDownloadVisit gallery
Demo.tsx
import { Group, Button } from '@mantine/core';
import { IconPhoto, IconDownload, IconArrowRight } from '@tabler/icons-react';
function Demo() {
return (
} variant="default">
Gallery
}>Download
}
rightSection={}
>
Visit gallery
);
}
Expand code
[Sections position](#sections-position)
----------------------------------------
`justify` prop sets `justify-content` of `inner` element. You can use it to change the alignment of left and right sections. For example, to spread them across the button set `justify="space-between"`.
If you need to align just one section to the side of the button set `justify` to `space-between` and add empty `` to the opposite section.
Button labelButton labelButton labelButton label
Justify
Center
Space-between
Demo.tsx
import { Button } from '@mantine/core';
import { IconPhoto } from '@tabler/icons-react';
function Demo() {
const icon = ;
return (
<>
}
variant="default"
mt="md"
>
Button label
);
}
Expand code
[Compact size](#compact-size)
------------------------------
`Button` supports `xs` – `xl` and `compact-xs` – `compact-xl` sizes. `compact` sizes have the same font-size as `xs` – `xl` but reduced padding and height.
Regular mdCompact md
Size
xs
sm
md
lg
xl
Demo.tsx
import { Button, Group } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
[Gradient variant](#gradient-variant)
--------------------------------------
When `variant` prop is set to `gradient`, you can control gradient with `gradient` prop, it accepts an object with `from`, `to` and `deg` properties. If the`gradient` prop is not set, `Button` will use `theme.defaultGradient` which can be configured on the [theme object](/theming/theme-object/)
. `gradient` prop is ignored when `variant` is not `gradient`.
Note that `variant="gradient"` supports only linear gradients with two colors. If you need a more complex gradient, then use [Styles API](/styles/styles-api/)
to modify `Button` styles.
Gradient button
Gradient from
Gradient to
Gradient degree
Demo.tsx
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
[Disabled state](#disabled-state)
----------------------------------
To make `Button` disabled, set `disabled` prop, this will prevent any interactions with the button and add disabled styles. If you want the button to just look disabled but still be interactive, set `data-disabled` prop instead. Note that disabled styles are the same for all variants.
Disabled button
Demo.tsx
import { Button } from '@mantine/core';
function Demo() {
return ;
}
Expand code
[Disabled state when Button is link](#disabled-state-when-button-is-link)
--------------------------------------------------------------------------
`` element does not support `disabled` attribute. To make `Button` disabled when it is rendered as a link, set `data-disabled` attribute instead and prevent default behavior in `onClick` event handler.
[Disabled link](https://mantine.dev)
Demo.tsx
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
[Customize disabled styles](#customize-disabled-styles)
--------------------------------------------------------
To customize disabled styles, it is recommended to use both `&:disabled` and `&[data-disabled]` selectors:
* `&:disabled` is used to style the button when `disabled` prop is set and also when the button is disabled by the parent component (for example, when `disabled` prop is set on a `` element which contains `Button`).
* `&[data-disabled]` is used to style the button when it is not actually disabled but should look like it is (for example, `data-disabled` should be used if you need to use [Tooltip](/core/tooltip/)
with disabled `Button` or when `Button` is used as a link)
Disabled with styles
Demo.module.cssDemo.tsx
.button {
&:disabled,
&[data-disabled] {
border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
background-color: transparent;
}
}
Expand code
[Disabled button with Tooltip](#disabled-button-with-tooltip)
--------------------------------------------------------------
`onMouseLeave` event [is not triggered](https://github.com/facebook/react/issues/18753)
when `Button` is disabled, so if you need to use [Tooltip](/core/tooltip/)
with disabled `Button` you need to set `data-disabled` prop on `Button` instead of `disabled`. Note that it is also required to change `onClick` event handler to `(event) => event.preventDefault()` as `Button` is not actually disabled and will still trigger `onClick` event.
Disabled button with tooltip
Demo.tsx
import { Button, Tooltip } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
[Loading state](#loading-state)
--------------------------------
When `loading` prop is set, `Button` will be disabled and [Loader](/core/loader/)
with overlay will be rendered in the center of the button. [Loader](/core/loader/)
color depends on `Button` variant.
Filled buttonLight buttonOutline button
Loading state
Demo.tsx
import { Button, Group, Switch } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
function Demo() {
const [loading, { toggle }] = useDisclosure();
return (
<>
);
}
Expand code
[Loader props](#loader-props)
------------------------------
You can customize [Loader](/core/loader/)
with `loaderProps` prop, it accepts all props that [Loader](/core/loader/)
component has:
Loading button
Demo.tsx
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
[Styles API](#styles-api)
--------------------------
`Button` supports [Styles API](/styles/styles-api/)
, you can add styles to any inner element of the component with`classNames` prop. Follow [Styles API](/styles/styles-api/)
documentation to learn more.
Your email
Component Styles API
Hover over selectors to highlight corresponding elements
root
Root element
loader
Loader component, displayed only when \`loading\` prop is set
inner
Contains all other elements, child of the \`root\` element
section
Left and right sections of the button
label
Button children
Demo.module.cssDemo.tsx
/*
* Hover over selectors to apply outline styles
*
*/
Expand code
Example of customizing `Button` with [Styles API](/styles/styles-api/)
and [data-\* attributes](/styles/data-attributes/)
:
12Send files3Send files
Demo.module.cssDemo.tsx
.root {
border-top-left-radius: var(--mantine-radius-xl);
border-bottom-left-radius: var(--mantine-radius-xl);
padding-left: 4px;
/* The following styles will be applied only when button is disabled */
&[data-disabled] {
/* You can use Mantine PostCSS mixins inside data attributes */
@mixin light {
border: 1px solid var(--mantine-color-gray-2);
}
@mixin dark {
border: 1px solid var(--mantine-color-dark-4);
}
/* You can target child elements that are inside .root[data-disabled] */
& .section[data-position='left'] {
opacity: 0.6;
}
}
}
.section {
/* Apply styles only to left section */
&[data-position='left'] {
--section-size: calc(var(--button-height) - 8px);
background-color: var(--mantine-color-body);
color: var(--mantine-color-text);
height: var(--section-size);
width: var(--section-size);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--mantine-radius-xl);
}
&[data-position='right'] {
@mixin rtl {
transform: rotate(180deg);
}
}
}
Expand code
[Custom variants](#custom-variants)
------------------------------------
To add new `Button` variants, use [data-variant](/styles/variants-sizes/)
attribute. Usually new variants are added on [theme](/theming/theme-object/)
, this way they are available in all `Button` components in your application.
Danger variantPrimary variant
Demo.tsxDemo.module.css
import { Group, Button, MantineProvider, createTheme } from '@mantine/core';
import classes from './Demo.module.css';
const theme = createTheme({
components: {
Button: Button.extend({
classNames: classes,
}),
},
});
function Demo() {
return (
);
}
Expand code
[Customize variants colors](#customize-variants-colors)
--------------------------------------------------------
You can customize colors for `Button` and other components variants by adding [variantColorResolver](/theming/colors/#colors-variant-resolver)
to your theme.
Lime filled buttonOrange light buttonDanger button
Demo.tsx
import {
Button,
Group,
MantineProvider,
defaultVariantColorsResolver,
VariantColorsResolver,
parseThemeColor,
rgba,
darken,
} from '@mantine/core';
const variantColorResolver: VariantColorsResolver = (input) => {
const defaultResolvedColors = defaultVariantColorsResolver(input);
const parsedColor = parseThemeColor({
color: input.color || input.theme.primaryColor,
theme: input.theme,
});
// Override some properties for variant
if (parsedColor.isThemeColor && parsedColor.color === 'lime' && input.variant === 'filled') {
return {
...defaultResolvedColors,
color: 'var(--mantine-color-black)',
hoverColor: 'var(--mantine-color-black)',
};
}
// Completely override variant
if (input.variant === 'light') {
return {
background: rgba(parsedColor.value, 0.1),
hover: rgba(parsedColor.value, 0.15),
border: `1px solid ${parsedColor.value}`,
color: darken(parsedColor.value, 0.1),
};
}
// Add new variants support
if (input.variant === 'danger') {
return {
background: 'var(--mantine-color-red-9)',
hover: 'var(--mantine-color-red-8)',
color: 'var(--mantine-color-white)',
border: 'none',
};
}
return defaultResolvedColors;
};
function Demo() {
return (
);
}
Expand code
[autoContrast](#auto-contrast)
-------------------------------
`Button` supports `autoContrast` prop and [theme.autoContrast](/theming/theme-object/#autocontrast)
. If `autoContrast` is set either on `Button` or on theme, content color will be adjusted to have sufficient contrast with the value specified in `color` prop.
Note that `autoContrast` feature works only if you use `color` prop to change background color. `autoContrast` works only with `filled` variant.
DefaultAuto contrast
Demo.tsx
import { Button, Group } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
[Button.Group](#buttongroup)
-----------------------------
FirstSecondThird
Orientation
Horizontal
Vertical
Demo.tsx
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
Expand code
Note that you must not wrap child `Button` components with any additional elements:
import { Button } from '@mantine/core';
function Demo() {
return (
);
}
[Button.GroupSection](#buttongroupsection)
-------------------------------------------
Use `Button.GroupSection` component to render sections that are not buttons inside `Button.Group`:
135
Demo.tsx
import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
import { Button } from '@mantine/core';
import { useCounter } from '@mantine/hooks';
function Demo() {
const [value, { increment, decrement }] = useCounter(135, { min: 0 });
return (
{value}
);
}
Expand code
[Polymorphic component](#polymorphic-component)
------------------------------------------------
`Button` is a [polymorphic component](/guides/polymorphic/)
– its default root element is `button`, but it can be changed to any other element or component with `component` prop:
import { Button } from '@mantine/core';
function Demo() {
return ;
}
You can also use components in `component` prop, for example, Next.js `Link`:
import Link from 'next/link';
import { Button } from '@mantine/core';
function Demo() {
return ;
}
> **Polymorphic components with TypeScript**
>
> Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, `ButtonProps` does not extend `React.ComponentPropsWithoutRef'<'div'>'` although `button` is the default element.
>
> If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support `component` prop), then your component props interface should extend HTML element props, for example:
>
> import type { ButtonProps, ElementProps } from '@mantine/core';
>
> interface MyButtonProps extends ButtonProps,
> ElementProps<'a', keyof ButtonProps> {}
>
> If you want your component to remain polymorphic after wrapping, use `createPolymorphicComponent` function described in [this guide](/guides/polymorphic/)
> .
[Get element ref](#get-element-ref)
------------------------------------
import { useRef } from 'react';
import { Button } from '@mantine/core';
function Demo() {
const ref = useRef(null);
return ;
}
[Previous\
\
ActionIcon](/core/action-icon/)
[Next\
\
CloseButton](/core/close-button/)
[Welcome to Mantine, React components library that you always wished for](/)
Build fully functional accessible web applications faster than ever
About
[Contribute](/contribute/)
[About Mantine](/about/)
[Changelog](/changelog/previous-versions/)
[GitHub Releases](https://github.com/mantinedev/mantine/releases)
Community
[Chat on Discord](https://discord.gg/wbH82zuWMN)
[Follow on X](https://x.com/mantinedev)
[Follow on Github](https://github.com/rtivital)
[GitHub discussions](https://github.com/mantinedev/mantine/discussions)
Project
[Mantine UI](https://ui.mantine.dev/)
[Help Center](https://help.mantine.dev)
[Github organization](https://github.com/mantinedev)
[npm organization](https://www.npmjs.com/org/mantine)
Built by [Vitaly Rtishchev](https://github.com/rtivital)
and [these awesome people](https://github.com/mantinedev/mantine/graphs/contributors)
[Join Discord community](https://discord.gg/wbH82zuWMN)
[Follow Mantine on X](https://x.com/mantinedev)
---