Table of Contents
Mantine is a React components library that offers a wide range of customizable components and hooks, designed to help you build fully functional and accessible web applications quickly. It’s open-source, TypeScript-based, and compatible with modern frameworks like Next.js, Gatsby, and Redwood.js.
Now let’s see how we can use Mantine UI in our Nextjs applications step by step.
1. Project Setup
- Using a Template: The easiest way to start is by using a pre-configured template from Mantine. These templates include the necessary dependencies and settings. You can find templates for both Next.js app router and pages router with varying levels of setup (minimal or full with tools like Jest, Storybook, ESLint) . To use a template, navigate to it on GitHub and click “Use this template”.
- Manual Setup: If you prefer setting up Mantine in an existing Next.js project or want to configure everything manually, follow these steps:
- Create a new Next.js application using the command: yarn create next-app –typescript.
- You can also use Mantine UI in your existing Next.js application.
2. Installation
Choose the Mantine packages you want to use. Common packages include:
- @mantine/core: Core components library (inputs, buttons, overlays, etc.).
- @mantine/hooks: Hooks for state and UI management.
- @mantine/form: Form management library.
- @mantine/dates: Date inputs and calendars.
- @mantine/notifications: Notifications system, etc.
Install the selected packages:
Now to install selected packages, run the following command.
npm install @mantine/core @mantine/hooksyarn add @mantine/core @mantine/hooks3. PostCSS Configuration
Mantine relies on PostCSS for compiling its CSS.
- Install PostCSS plugins and postcss-preset-mantine:
npm add --dev postcss postcss-preset-mantine postcss-simple-varsyarn add --dev postcss postcss-preset-mantine postcss-simple-vars- Create a postcss.config.cjs file in the root of your application:
module.exports = {
plugins: {
"postcss-preset-mantine": {},
"postcss-simple-vars": {
variables: {
"mantine-breakpoint-xs": "36em",
"mantine-breakpoint-sm": "48em",
"mantine-breakpoint-md": "62em",
"mantine-breakpoint-lg": "75em",
"mantine-breakpoint-xl": "88em",
},
},
},
};
Setup with pages router
Add styles imports to the root of your application. Usually, styles are imported once in the root file. For example, if you are using Next.js with pages router, you can import styles in _app.tsx file:
Add styles imports and MantineProvider to the pages/_app.tsx file:
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import type { AppProps } from 'next/app';
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({
/** Put your mantine theme override here */
});
export default function App({ Component, pageProps }: AppProps) {
return (
<MantineProvider theme={theme}>
<Component {...pageProps} />
</MantineProvider>
);
}Create pages/_document.tsx file with ColorSchemeScript component. Note that it is required even if you use only one color scheme in your application.
import { Head, Html, Main, NextScript } from 'next/document';
import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core';
export default function Document() {
return (
<Html lang="en" {...mantineHtmlProps}>
<Head>
<ColorSchemeScript defaultColorScheme="auto" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}Setup with app router
Add MantineProvider, ColorSchemeScript and styles imports to the app/layout.tsx file:
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core';
export const metadata = {
title: 'My Mantine app',
description: 'I have followed setup instructions carefully',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" {...mantineHtmlProps}>
<head>
<ColorSchemeScript />
</head>
<body>
<MantineProvider>{children}</MantineProvider>
</body>
</html>
);
}Done with the setup
Now lets Start development server and test our setup.
npm run dev
