Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

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

@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 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

@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

@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:

import { Group } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <button type="button" className="mantine-focus-auto">
        Focus auto
      </button>
      <button type="button" className="mantine-focus-always">
        Focus always
      </button>
      <button type="button" className="mantine-focus-never">
        Focus never
      </button>
      <button type="button" className="mantine-active">
        Active
      </button>
    </Group>
  );
}

Add global styles in your application

It is recommended to use CSS modules to apply styles to Mantine components with className prop or with 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 and change styles of <body />, :root and other elements. For example, to change body background-color:

body {
  background-color: var(--mantine-color-red-filled);
}

Previous

Vanilla extract

Next

CSS variables

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people