{"record":{"id":"56e6d3e2e61c8e3b","repo":"mantinedev/mantine","slug":"mantine-core-mantineprovider-was-not-found-in-t","errorCode":null,"errorMessage":"[@mantine/core] MantineProvider was not found in tree","messagePattern":"\\[@mantine/core\\] MantineProvider was not found in tree","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@mantine/core/src/core/MantineProvider/Mantine.context.ts","lineNumber":32,"sourceCode":"  getRootElement: () => HTMLElement | undefined;\n  classNamesPrefix: string;\n  getStyleNonce?: () => string | undefined;\n  cssVariablesResolver?: (theme: MantineTheme) => ConvertCSSVariablesInput;\n  cssVariablesSelector: string;\n  withStaticClasses: boolean;\n  headless?: boolean;\n  stylesTransform?: MantineStylesTransform;\n  env?: 'default' | 'test';\n  deduplicateInlineStyles?: boolean;\n}\n\nexport const MantineContext = createContext<MantineContextValue | null>(null);\n\nexport function useMantineContext() {\n  const ctx = use(MantineContext);\n\n  if (!ctx) {\n    throw new Error('[@mantine/core] MantineProvider was not found in tree');\n  }\n\n  return ctx;\n}\n\nexport function useMantineCssVariablesResolver() {\n  return useMantineContext().cssVariablesResolver;\n}\n\nexport function useMantineClassNamesPrefix() {\n  return useMantineContext().classNamesPrefix;\n}\n\nexport function useMantineStyleNonce() {\n  return useMantineContext().getStyleNonce;\n}\n\nexport function useMantineWithStaticClasses() {","sourceCodeStart":14,"sourceCodeEnd":50,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/core/MantineProvider/Mantine.context.ts#L14-L50","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Wrap the app root with <MantineProvider> from @mantine/core","For portals/separate roots, render the same tree inside MantineProvider or move the portal content under the provider","In tests, wrap renders: render(<Component />, { wrapper: MantineProvider }) or a custom wrapper","For Storybook, add MantineProvider as a global decorator"],"exampleFix":"// before\nReactDOM.createRoot(el).render(<App />);\n\n// after\nimport { MantineProvider } from '@mantine/core';\n\nReactDOM.createRoot(el).render(\n  <MantineProvider>\n    <App />\n  </MantineProvider>\n);","handlingStrategy":"validation","validationCode":"// Ensure the provider wraps the app before rendering any Mantine component\nimport { MantineProvider } from '@mantine/core';\n\nroot.render(\n  <MantineProvider>\n    <App />\n  </MantineProvider>\n);","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Add MantineProvider at the true app root as the first setup step","Create a shared test wrapper: const renderWithMantine = (ui) => render(ui, { wrapper: MantineProvider })","Audit any createRoot/render calls outside the main tree (widgets, modals) for missing providers"],"tags":["mantineprovider","context","react","setup"],"backgroundTag":"missing-context-provider","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}