mantinedev/mantine · critical · Error

@mantine/core: MantineProvider was not found in component tr

Error message

@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app

What it means

useMantineTheme reads MantineThemeContext and throws when it is null, i.e. no MantineProvider (which supplies the theme via MantineThemeProvider) wraps the consuming component. Almost every Mantine component calls this hook, so the error surfaces from deep inside the library.

Source

Thrown at packages/@mantine/core/src/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.tsx:13

import { createContext, use, useMemo } from 'react';
import { DEFAULT_THEME } from '../default-theme';
import { mergeMantineTheme } from '../merge-mantine-theme';
import { MantineTheme, MantineThemeOverride } from '../theme.types';

export const MantineThemeContext = createContext<MantineTheme | null>(null);

export const useSafeMantineTheme = () => use(MantineThemeContext) || DEFAULT_THEME;

export function useMantineTheme() {
  const ctx = use(MantineThemeContext);
  if (!ctx) {
    throw new Error(
      '@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app'
    );
  }

  return ctx;
}

export interface MantineThemeProviderProps {
  /** Determines whether theme should be inherited from parent MantineProvider @default true */
  inherit?: boolean;

  /** Theme override object */
  theme?: MantineThemeOverride;

  /** Your application or part of the application that requires different theme */
  children?: React.ReactNode;
}

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Wrap your app root with <MantineProvider>{children}</MantineProvider>
2. In tests, wrap renders in MantineProvider (or a custom render helper) or use a theme injection utility
3. Make sure portals are rendered inside the provider tree or re-wrap portal content

Example fix

// before
ReactDOM.createRoot(el).render(<App />);

// after
ReactDOM.createRoot(el).render(
  <MantineProvider>
    <App />
  </MantineProvider>
);

// Wrap app root once:
// <MantineProvider><App /></MantineProvider>
// In tests, create a helper:
const renderWithTheme = (ui: React.ReactElement) => render(<MantineProvider>{ui}</MantineProvider>);

// Runtime check outside React (e.g. Cypress/storybook):
// !!document.querySelector('[data-mantine-color-scheme]') hints the provider mounted

null

When it happens

Trigger: Rendering any Mantine component outside <MantineProvider>, including in tests, Storybook stories, portals mounted outside the provider, or SSR entry points where the provider was skipped.

Common situations: New app setup missing MantineProvider in the root layout, test files rendering components without a wrapper, portals/SDK windows created outside the React tree containing the provider, or provider placed below (not above) the component that needs it.

Related errors

• [@mantine/core] MantineProvider was not found in tree
• [@mantine/modals] useModals hook was called outside of conte
• ${errorMessage}
• Emotion cache is not available in context, make sure that yo
• useFormContext was called outside of FormProvider context

AI-assisted analysis of mantinedev/mantine@8a284e2c2c (2026-08-28). Data as JSON: /api/errors/45981e83afeca5f3. Report an issue: GitHub.