mantinedev/mantine · error · Error

[@mantine/core] MantineProvider was not found in tree

Error message

[@mantine/core] MantineProvider was not found in tree

What it means

Most @mantine/core hooks (useMantineTheme, useMantineClassNamesPrefix, useComputedColorScheme, etc.) read context from MantineProvider. This error means a Mantine component or hook was rendered outside of a <MantineProvider>, so no theme context exists in the React tree.

Source

Thrown at packages/@mantine/core/src/core/MantineProvider/Mantine.context.ts:32

  getRootElement: () => HTMLElement | undefined;
  classNamesPrefix: string;
  getStyleNonce?: () => string | undefined;
  cssVariablesResolver?: (theme: MantineTheme) => ConvertCSSVariablesInput;
  cssVariablesSelector: string;
  withStaticClasses: boolean;
  headless?: boolean;
  stylesTransform?: MantineStylesTransform;
  env?: 'default' | 'test';
  deduplicateInlineStyles?: boolean;
}

export const MantineContext = createContext<MantineContextValue | null>(null);

export function useMantineContext() {
  const ctx = use(MantineContext);

  if (!ctx) {
    throw new Error('[@mantine/core] MantineProvider was not found in tree');
  }

  return ctx;
}

export function useMantineCssVariablesResolver() {
  return useMantineContext().cssVariablesResolver;
}

export function useMantineClassNamesPrefix() {
  return useMantineContext().classNamesPrefix;
}

export function useMantineStyleNonce() {
  return useMantineContext().getStyleNonce;
}

export function useMantineWithStaticClasses() {

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Wrap the app root with <MantineProvider> from @mantine/core
2. For portals/separate roots, render the same tree inside MantineProvider or move the portal content under the provider
3. In tests, wrap renders: render(<Component />, { wrapper: MantineProvider }) or a custom wrapper
4. For Storybook, add MantineProvider as a global decorator

Example fix

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

// after
import { MantineProvider } from '@mantine/core';

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

// Ensure the provider wraps the app before rendering any Mantine component
import { MantineProvider } from '@mantine/core';

root.render(
  <MantineProvider>
    <App />
  </MantineProvider>
);

When it happens

Trigger: Rendering any Mantine component without wrapping the app in <MantineProvider>; rendering Mantine components into a separate React root (portal, modal library, second createRoot call) that lacks the provider; unit tests rendering components without the provider.

Common situations: New Mantine apps where the provider was skipped because defaultTheme was imported directly; Storybook stories missing a decorator; micro-frontends or widget bundles with their own React root; test environments (Jest/Testing Library) without a wrapper.

Related errors

• [@mantine/core] MantineProvider was not found in tree
• @mantine/core: MantineProvider was not found in component tr
• [@mantine/modals] useModals hook was called outside of conte
• ${errorMessage}
• useFormContext was called outside of FormProvider context

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