mantine A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.

Dependencies check up

[x] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

8.3.1

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

Hi,

I have this error which happens very randomly (on refresh or navigation, 1 time out of 5):

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

A server/client branch if (typeof window !== 'undefined').
Variable input such as Date.now() or Math.random() which changes each time it's called.
Date formatting in a user's locale which doesn't match the server.
External changing data without sending a snapshot of it along with the HTML.
Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

                        `<@mantine/core/Paper component="header" bg="dark" radius={0} p={{base:12,sm:24,md:32}} ...>
                          <@mantine/core/Box ref={null} mod={[...]} className="!flex flex..." style={{...}} ...>
                            <InlineStyles selector=".__m__-_R_..." styles={{padding:"c..."}} media={[...]}>
                              <style
                                data-mantine-styles="inline"
                                nonce={undefined}
                                dangerouslySetInnerHTML={{

                                __html: ".__m__-_R_albn5ritvlb_{padding:calc(0.75rem * var(--mantine-scale));}@m..."

                                __html: ".__m__-_R_1apbn5ritvlb_{padding:calc(0.75rem * var(--mantine-scale));}@..."
                              }}
                            >
                          <header
                            ref={null}
                            style={{--paper-radius:"0rem",background:"var(--mant..."}}

                            className="!flex flex-wrap justify-between gap-4 m_1b7284a3 mantine-Paper-root __m__..."

                            className="!flex flex-wrap justify-between gap-4 m_1b7284a3 mantine-Paper-root __m__..."
                            data-variant={undefined}
                            data-size={undefined}
                            size={undefined}
                          >`

YES, I already read this article: https://help.mantine.dev/q/color-scheme-hydration-warning YES, I already applied <html lang="en" {...mantineHtmlProps}>

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

[ ] I would be willing to implement a fix for this issue

Oct 01 '25 17:10 sovetski

Hard to tell what is wrong, my best bet is that something changed in Next.js related to use-id hook in recent releases. See useRandomClassName – https://github.com/mantinedev/mantine/blob/master/packages/@mantine/core/src/core/Box/use-random-classname/use-random-classname.ts

The fix cannot be provided on Mantine side since the ssr logic is fully controlled by Next.js. Probably better to wait for a fix from their side. You can also try downgrading/upgrading Next.js to see if that resolves the issue.

Oct 02 '25 18:10 rtivital

I have a similar error on my side after updating to NextJS 15.5.3 from 15.0.3

className="m_8bffd616 mantine-Flex-root __m__-_R_bamq7al5etelb_ mantine-..."
className="m_8bffd616 mantine-Flex-root __m__-_R_1dar8tal5etelb_ mantine..."

Note the changed id's using, this is using mantine 8.3.0 and next 15.5.3

Before i was using mantine 7 and next 15.0.3 and error did not happen.

In both cases i was using it in combination with theme-ui

<html lang="en" style={{ height: '100%' }} {...mantineHtmlProps}>
      <head>
        <ColorSchemeScript />
      </head>

      <body
        style={{
          backgroundColor: '#090E19',
          display: 'flex',
          flexDirection: 'column',
          minHeight: '100%',
          width: '100%',
        }}
      >
        <ThemeProvider>
          <MantineProvider theme={mantineTheme}>{children}</MantineProvider>
        </ThemeProvider>
      </body>
    </html>