The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup , ColorSchemeScript and other essential features. Some templates also include additional features like Jest , Storybook and oxlint.
If you are not familiar with GitHub, you can find detailed instructions on how to bootstrap a project from a template on this page .
Next.js template with app router and full setup: Jest, Storybook, oxlint
Next.js template with pages router and full setup: Jest, Storybook, oxlint
next-app-min-template
Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration
next-pages-min-template
Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration
next-vanilla-extract-template
Next.js template with Vanilla extract example
Follow the create-next-app guide to create a new Next.js application:
Choose packages that you will use in your application:
Hooks for state and UI management
Core components library: inputs, buttons, overlays, etc.
Form management library
Date inputs, calendars
Recharts based charts library
Notifications system
Code highlight with your theme colors and styles
Rich text editor based on Tiptap
Capture files with drag and drop
Embla based carousel component
Full-screen media lightbox with carousel navigation
Overlay command center
Centralized modals manager
Install dependencies:
Install PostCSS plugins and postcss-preset-mantine :
Create a postcss.config.cjs file at the root of your application with the following content:
Add styles imports and MantineProvider to the pages/_app.tsx file:
Create a pages/_document.tsx file with the ColorSchemeScript component. Note that it's required even if you use only one color scheme in your application.
All set! Start the development server:
Add MantineProvider , ColorSchemeScript and styles imports to the app/layout.tsx file:
If you use both app and pages router in one application, you need to setup both pages/_app.tsx and app/layout.tsx files as described above.
All Mantine components require context to support default props and Styles API . Mantine components cannot be used as server components. This means that components will render both on the server and client.
Entry points of all @mantine/* packages ( index.js files) have the 'use client'; directive at the top of the file – you don't need to add 'use client'; to your pages/layouts/components.
Some components like Popover have associated compound components ( Component.XXX ), where XXX is a compound component name. Compound components cannot be used in server components. Instead, use the ComponentXXX syntax or add the 'use client'; directive to the top of the file.
Example that won't work in server components:
Example with 'use client'; directive:
Example with ComponentXXX syntax:
To enable tree shaking with app router, enable the experimental optimizePackageImports feature in your next.config.mjs :
If you have any issues with Mantine in your Next.js application, please check the Help Center article that covers the most common issues with app router and server components.