[Feature request]: Mantine UI Template / Tutorial

[abdulhakam]

Is your feature request related to a problem? Please describe.

Hi, I found this project some time ago and have been trying to use it with mantine 8 (also tried mantine 7.x), the problem is that in the dev environment the client keeps receiving some chunks of data and then crashes the page itself.

what I am wanting to try is use mantine as UI, and tuono to SSG the website to be hostable on static server(pocketbase since it is quite a reliable data api server).

Describe the solution you'd like

I would like have a tutorial/ guide added to docs similar to mantine.dev's guide for nextjs since the documentation for tuono itself uses mantine UI (although older).

Describe alternatives you've considered

If not a tutorial then at least a template?

whichever is easier. but I would prefer tutorial since it could then be adapted to some other ui libraries.

Additional context

I am trying to use tuono in a production website as an SSG so I would then serve the static output using pocketbase.
I prefer Mantine over tailwind and many others since this is the UI library I have used most. (Heck I even tried making a copy of Mantine with similar functionality in html web components for use in simpler website but kind of failed miserably.)

[Valerioageno]

Hi, thanks for the issue. Can you share some details of the crash you are encountering?

A standalone tutorial is too time-consuming to keep in sync with the project. I might be positive tho on adding a with-mantine template in the examples.

[abdulhakam]

Thank you for reading this, the crash occurs in the browser tab, the component I tried using is Header with mega menu from https://ui.mantine.dev/category/headers/
in the root layout.
the page loads just fine initially but then it starts creating too many chunk requests that the computer slows down and then the web browser stops the web page from executing further. sometimes there is THE blue screen if browser or I am late in stopping the web page.

I tried following the guide on mantine website for add the library in a project without framework.

Thank you.

[abdulhakam]

I think my problem is more of a bug than wrongly adding mantine UI in tuono.

It appears to be the problem with tabler icons, and it only happens in dev environment.

After page loads in dev environment, the page then starts loading ALL icons at the same time causing slowdowns and crashes.

[Valerioageno]

I see. I remember now that that's a known issue on tabler side. To fix it you need the following configuration in Tuono.config.ts

import type { TuonoConfig } from 'tuono/config'

const config: TuonoConfig = {
  vite: {
    alias: {
      '@': 'src',
      '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
    },
  },
}

export default config

And then use the alias to import the tabler library

[abdulhakam]

that fixed that, I will write a small guide in markdown for setting up mantine with tuono with this fix in some time.