Mantine UI with Next 13 app dir

[Tansi-Jones]

What package has an issue

@mantine/core

Describe the bug

Hello, please is app folder supported yet, if so how do i set it up

What version of @mantine/hooks page do you have in package.json?

5.10.0

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

None

Are you willing to participate in fixing this issue and create a pull request with the fix

None

Possible fix

No response

[rtivital]

see https://github.com/mantinedev/mantine/issues/2815

[mikkurogue]

As a side note from personal testing, all Mantine functionality that I have used so far works in the experimental app dir for Next.js 13. The caveat is to use the 'use client' flag at the top of component you would like to use hooks and components in.

I think practically this is also the way to go in general with maybe minimal changes required to Mantine itself.

Personal recommendations is to use client components as proxies for the Mantine components that can then be easily imported in to server components. An example is to create a Provider component and passing children as props to this, and then using that Provider component in the layout file.

src/app/providers.tsx :

"use client";

import React, { ReactNode } from "react";
import { MantineProvider } from "@mantine/core";

interface IProviders {
  children: ReactNode;
}

const Providers = ({ children }: IProviders) => {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS theme={{
      colorScheme: 'dark'
    }}>
      {children}
    </MantineProvider>
  );
};

export default Providers;

Then use this file in the layout.tsx in app/src/layout.tsx and wrap the children in this component.

This seems to be the best way for me currently to easily differentiate between what I want to do on the client vs the server.

I assume @rtivital you would propose something similar for the time being

[rtivital]

Duplicate of #2815