Issue with Webpage Layout While Using RainbowKit
I’m facing an issue with the webpage layout when integrating RainbowKit into my project. Specifically, the layout of the page becomes distorted or unresponsive after I include RainbowKit's components. This issue occurs in various browsers and seems to affect both the main content and the navigation menus.
The template i'm using is metronic-v9.1.1 typescript version.
RainbowKit doc : https://www.rainbowkit.com/docs/installation
The file involved is src/main.tsx, code :
root.render(
<React.StrictMode>
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
<ProvidersWrapper>
<App />
</ProvidersWrapper>
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
</React.StrictMode>
);
Replies (5)
Hi,
Metronic 9 Tailwind React is fully compatible with the Shadcn UI framework. However, integration with other UI frameworks is outside the scope of the template.
While most generic React components work seamlessly with Metronic, component kits that rely on their own context and theme implementations require extensive integration efforts, which are not provided out of the box.
For example, integrating the Shadcn UI framework with Metronic required approximately a month of dedicated work to ensure full compatibility. Adding additional UI frameworks could overcomplicate the template, so we recommend leveraging the Shadcn UI components that are already supported.
If you have further questions, feel free to reach out.
Best regards,
Sean
Thank you for your time, i fully understand.
One more question, Could you please provide the incremental file package for the upgrade from version 9.1.1 to 9.1.2? After working on 9.1.1 version for an extended period, it becomes difficult to migrate to a new version.
could you give me an example of implement rainbowkit into metronic-v9.1.1 typescript version.
I want to show you with screenshots, but it seems there is nowhere to upload images.
