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

useMantineColorScheme reads the color-scheme context created by MantineProvider. Calling it in a component rendered outside <MantineProvider> throws this error. Unlike useMantineContext, this hook also touches window/localStorage, but the throw here is purely the missing provider.

Source

Thrown at packages/@mantine/core/src/core/MantineProvider/use-mantine-color-scheme/use-mantine-color-scheme.ts:30

  nonce && style.setAttribute('nonce', nonce);

  document.head.appendChild(style);
  const clear = () =>
    document
      .querySelectorAll('[data-mantine-disable-transition]')
      .forEach((element) => element.remove());
  return clear;
}

export function useMantineColorScheme({ keepTransitions }: { keepTransitions?: boolean } = {}) {
  const clearStylesRef = useRef<() => void>(noop);
  const timeoutRef = useRef<number>(-1);
  const ctx = use(MantineContext);
  const nonce = useMantineStyleNonce();
  const nonceValue = useRef(nonce?.());

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

  const setColorScheme = (value: MantineColorScheme) => {
    ctx.setColorScheme(value);
    clearStylesRef.current = keepTransitions ? () => {} : disableTransition(nonceValue.current);
    window.clearTimeout(timeoutRef.current);
    timeoutRef.current = window.setTimeout(() => {
      clearStylesRef.current?.();
    }, 10);
  };

  const clearColorScheme = () => {
    ctx.clearColorScheme();
    clearStylesRef.current = keepTransitions ? () => {} : disableTransition(nonceValue.current);
    window.clearTimeout(timeoutRef.current);
    timeoutRef.current = window.setTimeout(() => {
      clearStylesRef.current?.();
    }, 10);

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Move MantineProvider to the true root of the tree so every consumer (including the toggle) is a descendant
2. In tests, wrap with a custom render helper that includes MantineProvider
3. Restructure Next.js apps so the provider wraps the layout that contains the consumer

Example fix

// before
export function Layout({ children }) {
  return (
    <>
      <ThemeToggle /> {/* uses useMantineColorScheme, throws */}
      <MantineProvider>{children}</MantineProvider>
    </>
  );
}

// after
export function Layout({ children }) {
  return (
    <MantineProvider>
      <ThemeToggle />
      {children}
    </MantineProvider>
  );
}

// Verify provider presence before render in dev
if (!document.querySelector('[data-mantine-provider]')) {
  console.warn('MantineProvider missing — wrap the app root');
}

When it happens

Trigger: Calling useMantineColorScheme() in a component above/outside MantineProvider (e.g. in the provider's own parent, a layout, or a second React root); unit tests without the provider wrapper.

Common situations: App shells where the theme toggle button lives outside the provider subtree; Next.js layout structure putting the provider in a child layout; RTL/Jest tests without a wrapper; micro-frontends with isolated roots.

Related errors

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

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