# MantineProvider

# MantineProvider

`MantineProvider` provides a [theme object](https://mantine.dev/llms/theming-theme-object.md) context value, manages color scheme
changes, and injects [CSS variables](https://mantine.dev/llms/styles-css-variables.md). It must be rendered at the root of your
application and should be used only once.

## Usage

```tsx
import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  /** Your theme override here */
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

## MantineProvider props

`MantineProvider` supports the following props:

```tsx
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, by default variables are applied to `:root` and `:host` */
  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 `<style />` 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 `<style />` tag. Global classes are required for `hiddenFrom`/`visibleFrom` and `lightHidden`/`darkHidden` props to work; `true` by default. */
  withGlobalClasses?: boolean;

  /** Determines whether inline styles with identical content should be deduplicated using React 19 style hoisting. When enabled, components with the same responsive style props share a single `<style />` tag instead of each generating their own. @default false */
  deduplicateInlineStyles?: boolean;

  /** Environment in which the provider is used; `'test'` environment disables all transitions and portals */
  env?: 'default' | 'test';

  /** Your application */
  children?: React.ReactNode;
}
```

### theme

Pass a [theme object](https://mantine.dev/llms/theming-theme-object.md) override to the `theme` prop. It will be merged with the default
theme and used in all components.

```tsx
import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  fontFamily: 'Open Sans, sans-serif',
  primaryColor: 'cyan',
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

### colorSchemeManager

`colorSchemeManager` is used to retrieve and set the color scheme value in external storage. By default,
`MantineProvider` uses `window.localStorage` to store the color scheme value, but you can pass your own
implementation to the `colorSchemeManager` prop. You can learn more about color scheme management in the
[color schemes guide](https://mantine.dev/llms/theming-color-schemes.md).

```tsx
import {
  localStorageColorSchemeManager,
  MantineProvider,
} from '@mantine/core';

const colorSchemeManager = localStorageColorSchemeManager({
  key: 'my-app-color-scheme',
});

function Demo() {
  return (
    <MantineProvider colorSchemeManager={colorSchemeManager}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

### defaultColorScheme

The `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, the color scheme value is `light`.
You can learn more about color scheme management in the [color schemes guide](https://mantine.dev/llms/theming-color-schemes.md).

```tsx
import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider defaultColorScheme="dark">
      {/* Your app here */}
    </MantineProvider>
  );
}
```

### cssVariablesSelector

`cssVariablesSelector` is a CSS selector to which [CSS variables](https://mantine.dev/llms/styles-css-variables.md) should be added.
By default, variables are applied to `:root` and `:host`. `MantineProvider` generates CSS variables based
on given [theme override](https://mantine.dev/llms/theming-theme-object.md) and `cssVariablesResolver`, then these variables are
rendered into `<style />` tag next to your application.
You can learn more about Mantine CSS variables in the [CSS variables guide](https://mantine.dev/llms/styles-css-variables.md).

```tsx
import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider cssVariablesSelector="html">
      {/* Your app here */}
    </MantineProvider>
  );
}
```

### withCssVariables

`withCssVariables` determines whether theme CSS variables should be added to the given `cssVariablesSelector`.
By default, it is set to `true`. You should not change it unless you want to manage CSS variables
via a `.css` file (note that in this case you will need to generate all theme tokens
that are not part of the default theme on your side).

```tsx
import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider withCssVariables={false}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

### deduplicateCssVariables

`deduplicateCssVariables` determines whether CSS variables should be deduplicated: if a CSS variable has the same value as in the 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 a `<style />` tag
even if they have the same value as in the default theme.

```tsx
import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider deduplicateCssVariables={false}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

### deduplicateInlineStyles

`deduplicateInlineStyles` enables React 19 style tag deduplication for responsive
[style props](https://mantine.dev/llms/styles-style-props.md). When multiple components share the same responsive
style prop values (for example, many list items with `mt={{ base: 10, md: 20 }}`),
only a single `<style />` tag is generated and hoisted to `<head />` instead of
each component injecting its own.

This can significantly improve performance in scenarios where many components
use the same responsive style props. See the [styles performance guide](https://mantine.dev/llms/styles-styles-performance.md)
for more details.

```tsx
import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider deduplicateInlineStyles>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

### getRootElement

`getRootElement` is a function that returns the root application element (usually `html`) to set the `data-mantine-color-scheme` attribute.
The default value is `() => document.documentElement` which means that the `data-mantine-color-scheme`
attribute will be added to the `<html />` tag. You can learn more about color scheme management in the
[color schemes guide](https://mantine.dev/llms/theming-color-schemes.md).

```tsx
import { MantineProvider } from '@mantine/core';

const getRootElement = () =>
  typeof window === 'undefined' ? undefined : document.body;

function Demo() {
  return (
    <MantineProvider getRootElement={getRootElement}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

### classNamesPrefix

`classNamesPrefix` is a prefix for components' static classes (for example `{selector}-Text-root`).
The default value is `mantine` – all components will have a `mantine-` prefix in their **static classes**.

```tsx
import { MantineProvider, Text } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider>
      <Text>Just some text</Text>
    </MantineProvider>
  );
}
```

In this case (default `classNamesPrefix`), the [Text](https://mantine.dev/llms/core-text.md) 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 the [Styles API](https://mantine.dev/llms/styles-styles-api.md)

With `classNamesPrefix` you can change only the **static class**:

```tsx
import { MantineProvider, Text } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider classNamesPrefix="app">
      <Text>Just some text</Text>
    </MantineProvider>
  );
}
```

Now the [Text](https://mantine.dev/llms/core-text.md) component will have the following classes:

* `mantine-focus-auto` – `classNamesPrefix` does not impact global utility classes – they are static and **cannot be changed**
* `m-3nrA4eL` – `classNamesPrefix` does not impact library classes – they are static and **cannot be changed**
* `app-Text-root` – component static class has `classNamesPrefix` instead of `mantine`

### 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`:

```tsx
import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider withStaticClasses={false}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

### withGlobalClasses

`withGlobalClasses` determines whether global classes should be added with a `<style />` 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.

```tsx
import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider withGlobalClasses={false}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

### getStyleNonce

`getStyleNonce` is a function to generate a [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) attribute added to dynamically generated `<style />` tags.

### cssVariablesResolver

`cssVariablesResolver` is a function to generate CSS variables styles based on the [theme object](https://mantine.dev/llms/theming-theme-object.md).
You can learn more about Mantine CSS variables in the [CSS variables guide](https://mantine.dev/llms/styles-css-variables.md#css-variables-resolver).

### env

The `env` prop can be used in a test environment to disable some features that
might impact tests and/or make it harder to test components:

* transitions that mount/unmount a child component with delay
* portals that render a child component in a different part of the DOM

To enable the test environment, set `env` to `test`:

```tsx
import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider env="test">
      {/* Your app here */}
    </MantineProvider>
  );
}
```

Note that `env="test"` is intended to be used in test environments only with [Jest](https://mantine.dev/llms/guides-jest.md) or [Vitest](https://mantine.dev/llms/guides-vitest.md). Do not use it in
development or production environments. It is also not recommended to be used with
end-to-end testing tools like [Cypress](https://mantine.dev/guides/cypress) or [Playwright](https://mantine.dev/guides/playwright).