{"record":{"id":"45981e83afeca5f3","repo":"mantinedev/mantine","slug":"mantine-core-mantineprovider-was-not-found-in-co","errorCode":null,"errorMessage":"@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app","messagePattern":"@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"packages/@mantine/core/src/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.tsx","lineNumber":13,"sourceCode":"import { createContext, use, useMemo } from 'react';\nimport { DEFAULT_THEME } from '../default-theme';\nimport { mergeMantineTheme } from '../merge-mantine-theme';\nimport { MantineTheme, MantineThemeOverride } from '../theme.types';\n\nexport const MantineThemeContext = createContext<MantineTheme | null>(null);\n\nexport const useSafeMantineTheme = () => use(MantineThemeContext) || DEFAULT_THEME;\n\nexport function useMantineTheme() {\n  const ctx = use(MantineThemeContext);\n  if (!ctx) {\n    throw new Error(\n      '@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app'\n    );\n  }\n\n  return ctx;\n}\n\nexport interface MantineThemeProviderProps {\n  /** Determines whether theme should be inherited from parent MantineProvider @default true */\n  inherit?: boolean;\n\n  /** Theme override object */\n  theme?: MantineThemeOverride;\n\n  /** Your application or part of the application that requires different theme */\n  children?: React.ReactNode;\n}\n","sourceCodeStart":1,"sourceCodeEnd":31,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.tsx#L1-L31","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Wrap your app root with <MantineProvider>{children}</MantineProvider>","In tests, wrap renders in MantineProvider (or a custom render helper) or use a theme injection utility","Make sure portals are rendered inside the provider tree or re-wrap portal content"],"exampleFix":"// before\nReactDOM.createRoot(el).render(<App />);\n\n// after\nReactDOM.createRoot(el).render(\n  <MantineProvider>\n    <App />\n  </MantineProvider>\n);","handlingStrategy":"validation","validationCode":"// Wrap app root once:\n// <MantineProvider><App /></MantineProvider>\n// In tests, create a helper:\nconst renderWithTheme = (ui: React.ReactElement) => render(<MantineProvider>{ui}</MantineProvider>);","typeGuard":"// Runtime check outside React (e.g. Cypress/storybook):\n// !!document.querySelector('[data-mantine-color-scheme]') hints the provider mounted","tryCatchPattern":"null","preventionTips":["Add MantineProvider at the app root during initial setup","Create a shared test render helper that includes the provider","Keep portals inside the provider tree"],"tags":["mantine","react","context","provider","setup"],"backgroundTag":"missing-context-provider","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}