The easiest way to get started is to use one of the templates. All templates include required dependencies and pre-configured settings. Some templates also include additional features like Jest , Storybook , oxlint , etc.
Templates include only @mantine/core and @mantine/hooks packages, if you need additional @mantine/* packages, follow installation instructions of the package you want to use.
To get started with a template, open it on GitHub and click "Use this template" button. In order to use this feature you need to be logged in to your GitHub account. If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template in this article .
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
Vite template with full setup: Vitest, oxfmt, Storybook, oxlint
Vite template with minimal setup – no additional tools included, only default Vite configuration
vite-vanilla-extract-template
Vite template with Vanilla extract example
Gatsby template with basic setup
RedwoodJS template with basic setup
Community templates are created and maintained by the community members. These templates include additional features and third-party integrations. You are welcome to share your template with the community by following this guide .
Create a template with your stack and share it with the community
Next.js app router T3 stack template
next-tailwind-template
Next.js app router + Mantine + Tailwind template
Next.js app router + Mantine + Bun template
Fullstack boilerplate with Next.js, auth, MongoDB, Turborepo
next-turborepo-template
App router + Mantine + Turborepo template
nextra-documentation-template
Nextra + Mantine template
fumadocs-documentation-template
Fumadocs + Mantine template
Next.js SaaS boilerplate with Mantine
Next.js + Mantine + next-intl + Storybook + Vitest + Playwright template
nx-vite-monorepo-template
NX monorepo template with: Vite, GraphQL / Apollo, Typescript, Storybook / CSS Modules
Vite + Redux + i18next + auth + Mantine dashboard template
Vite + Supabase + Mantine template
Vite + Waku + Mantine template
tanstack-start-cloudflare-template
Tanstack Start + Cloudflare + Mantine template
Bun + Vite + Mantine template
electron-vite-template
Electron + Vite + React desktop app template
react-router-template
Basic react-router + Mantine template
If you want to add Mantine to an existing project or prefer to set up everything manually, follow one of the guides below to get started with Mantine and your preferred framework.
Best choice for a single page application (SPA)
Best choice for an application with SSR
Get started with React Router
Get started with RedwoodJS
Get started with Gatsby
Create React App was deprecated in early 2023 ( comment from maintainers ). It is not recommended to use it for new projects. It is recommended to use Vite or Next.js instead. Starting from version 7.0, certain Mantine styling features are no longer officially supported in Create React App. If you still prefer to use Create React App, follow this guide .
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 :
PostCSS without framework
If you are using a framework that is not officially supported, you may need to configure PostCSS manually. Please refer to the framework's documentation for specific instructions. For instance, if you are using Webpack, it will be necessary to install and set up postcss-loader .
Create postcss.config.cjs file at the root of your application with the following content:
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:
Wrap your application with MantineProvider :
If your application has server side rendering, add ColorSchemeScript to the <head /> of your application and spread mantineHtmlProps on the <html /> element to avoid seeing a hydration warning :
All set! You can now use Mantine components in your application.
By default, VS Code does not recognize postcss syntax, you need to install PostCSS Intellisense and Highlighting to enable syntax highlighting and suppress variables ( $variable ) errors.
To get CSS variables autocomplete, install CSS Variable Autocomplete extension . Then create .vscode/settings.json file in the root folder of your project with the following content:
Before you jump into the code, it is recommended to learn more about Mantine theming and styling options. The most important documentation pages are:
All contributions to the projects are welcome and appreciated. Contribute financially by sponsoring the project on OpenCollective . Your sponsorship will help us to maintain the project and develop new features.
Other ways to support the project:
Design is not a part of the development process – there are no official Figma or Sketch design files. However, there are community-driven projects that provide Figma components based on Mantine. Note that these projects are not maintained by Mantine team, and it is not guaranteed that they are up-to-date with the latest Mantine version.
All @mantine/* packages are distributed under MIT license. You can use them in any project, commercial or not, with or without attribution. All @mantine/* packages dependencies are also distributed under MIT license.