Mantine next example

Configuration

For Mantine UI to work correctly, you need to setup the ChakraProvider at the root of your application. Go to the root of your application and do this:

import * as React from "react";
      // 1. import MantineProvider
      import { MantineProvider } from "@mantine/core";
      function App() {
        // 2. Use at the root of your app
        return (
          <MantineProvider
              withGlobalStyles
              withNormalizeCSS
              theme={{
                /** Put your mantine theme override here */
                colorScheme: "dark",
              }}
            >
              <Component {...pageProps} />
            </MantineProvider>
        );
      }

if you come across any issues during installation, please refer to Mantine docs.

Note!

For Next.js, you need to set this up in pages/_app.js or pages/_app.tsx

For Gatsby, install the gatsby-plugin-mantine . Add gatsby-plugin-mantine in your gatsby.config.js file:

module.exports = {
         plugins: ['gatsby-plugin-mantine' /* ...other plugins */],
    };

Add Custom Theme (Optional)

If you need to customize the default mantine theme to match your design requirements, you can extend the theme from @mantine/core. Mantine UI provides us with different function that deep merges the default theme with your customizations.

import { MantineProvider } from '@mantine/core';

          function Demo() {
            return (
              <MantineProvider
                withGlobalStyles
                withNormalizeCSS
                theme={{
                  // for example, if you want to change the default color scheme to light
                  colorScheme: 'light',
                // add your custom colors, shadows, headings, etc.
                  colors: {
                    // Add your color
                    deepBlue: ['#E9EDFC', '#C1CCF6', '#99ABF0' /* ... */],
                    // or replace default theme color
                    blue: ['#E9EDFC', '#C1CCF6', '#99ABF0' /* ... */],
                  },
          
                  shadows: {
                    md: '1px 1px 3px rgba(0, 0, 0, .25)',
                    xl: '5px 5px 3px rgba(0, 0, 0, .25)',
                  },
          
                  headings: {
                    fontFamily: 'Roboto, sans-serif',
                    sizes: {
                      h1: { fontSize: '2rem' },
                    },
                  },
                }}
              >
                <App />
              </MantineProvider>
            );
          }

Made with ❤️ from Nigeria 🇳🇬 by Lukman Isiaka