Using NextUI + Mantine UI Libraries & Page Layout Issue

[teal rampart]

Greetings! Since the first second I discovered NextUI through a Google search, I have been in awe of it. Before implementing NextUI for a better user interface, I was working on a project that I wanted to finish in time for its initial release.

However, I began using the Mantine component library before discovering NextUI, but I now want to use both of them since Mantine has more core functions and NextUI has a superior design. Therefore, I was wondering whether combining these two should result in any problems or just be okay.

Yet, ever since I installed NextUI and attempted to wrap my "_app" with NextUIProvider inside the MantineProvider, I've had a strange display when my app is launched. For a little moment, it will appear as though the CSS is broken before displaying the page content as intended. I mean, it still works in the end, but I still find it to be sort of meh given my need for the ideal experience. Eventually, I tried to unwrap my app and re-allow it to MantineProvider exclusively, but the issue has persisted ever since.

Here is a preview how how the page loads in the first place ⬆️

⬇️ And here is how it's supposed to load (which happens like 1s after page loads)

So after I stopped and restarted by app, the CSS issue appears to be solved, I guess this might be related to the CSSBaseline from the _document page? If so, Can NextUI work without it?

Yeah, it's def due to the _document css properties, thus wrapping my app inside NextUIPrivoder also gives me this annoying white bar on the top of the page

[velvet lichen]

For the issue of no-styles after loading, you need to add CssBaseline.flush() in _document.js or _document.tsx https://nextui.org/docs/guide/nextui-plus-nextjs#next.js

For the baseline style, you can disable it by disableBaseline in NextUIProvider if you like

https://nextui.org/docs/guide/getting-started#nextuiprovider-props

[velvet lichen]

This will generate the styles on the server-side and inject it into the document's head

[teal rampart]

Bet, sounds interesting. On the other and, it doesn't looks like NextUI and Mantine works together

[velvet lichen]

Here's an example https://codesandbox.io/s/nextui-with-mantine-1ohxor but there are some issues with toggle themes

[teal rampart]

Ooooh looks really interesting! I'mma pick a look on there ASAP. Thanks a lot ❤️