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, ESLint, etc.
All templates include only
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 on the "Use this template" button. Note that you need to be logged in to your GitHub account to use this feature. If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.
Next.js template with app router and full setup: Jest, Storybook, ESLint
Next.js template with pages router and full setup: Jest, Storybook, ESLint
Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration
Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration
Next.js template with Vanilla extract example
Vite template with full setup: Jest, Storybook, ESLint
Vite template with minimal setup – no additional tools included, only default Vite configuration
Vite template with Vanilla extract example
Remix template with full setup: Jest, Storybook, ESLint
Remix template with minimal setup – no additional tools included, only default Remix configuration
Gatsby template with basic setup
RedwoodJS template with basic setup
Follow one of the guides below to get started with Mantine and your preferred framework. Note that usually it is better to start a new project with a template. Use guides if you want to add Mantine to an existing project or if enjoy doing things manually.
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
Code highlight with your theme colors and styles
Rich text editor based on Tiptap
Capture files with drag and drop
Embla based carousel component
Overlay command center
Centralized modals manager
Install PostCSS plugins and postcss-preset-mantine:
postcss.config.js 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
Wrap your application with MantineProvider:
If your application has server side rendering, add ColorSchemeScript
<head /> of your application:
All set! Now you can use Mantine components in your application.
Before you jump into the code, it is recommended to learn more about Mantine theming and styling options. The most important documentation pages are:
- API overview – overview of the most important Mantine styling and theming features
- Theme object – learn about available theme properties
- Colors – learn how to add/replace colors in the theme object
- CSS modules – learn how to use CSS modules with Mantine
- postcss-preset-mantine – learn about
postcss-preset-mantinefunctions and mixins
- Responsive styles – learn how to apply responsive styles to components
- Styles API – learn how to style internal elements of any component
- Polymorphic components – learn how to use polymorphic components to change rendered element
If you enjoy working with Mantine we would appreciate your contribution to the project. There are multiple ways to support the project:
- Share your feedback in GitHub Discussions – we are always happy to hear your thoughts on how to make Mantine better. Most of the new features and components are based on the feedback we receive from the community.
- Help others on Discord and/or GitHub Discussions. There are usually 10-20 new questions every day, you can help people with their issues and questions. While helping others, you will learn yourself and become more proficient with React and Mantine.
- Give us a code review. You are welcome to explore
@mantine/*packages source code and provide your feedback on how we can improve it. We are always open to new ideas and suggestions.
- Send us some kind words. We usually receive only bug reports and feature requests, it is always nice to hear that people enjoy working with Mantine.
- Star the project on GitHub. It is a small thing that helps us grow and get more people interested in the project.
- Contribute to the Mantine codebase. We welcome all kinds of contributions: if you do not have much experience with React/TypeScript, you can help us improve the documentation to make it more clear and understandable for new developers. If you are an experienced React developer, you can help us with open issues.
- If you are using Mantine at work and your company wants to support the project, you can allocate some time of your engineers to contribute to Mantine.
Design files are not used during the development process of the library – there are no official Figma or Sketch 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 we do not guarantee that they are up-to-date with the latest Mantine version.
@mantine/* packages are distributed under MIT license.
You can use them in any project, commercial or not, with or without attribution. All
dependencies are also distributed under MIT license.