Getting started

Get started with a template

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.

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.

Templates list:

	next-app-template Next.js template with app router and full setup: Jest, Storybook, ESLint	Use template
	next-pages-template Next.js template with pages router and full setup: Jest, Storybook, ESLint	Use template
	next-app-min-template Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration	Use template
	next-pages-min-template Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration	Use template
	next-vanilla-extract-template Next.js template with Vanilla extract example	Use template
	vite-template Vite template with full setup: Vitest, Prettier, Storybook, ESLint	Use template
	vite-min-template Vite template with minimal setup – no additional tools included, only default Vite configuration	Use template
	vite-vanilla-extract-template Vite template with Vanilla extract example	Use template
	remix-template Remix template with basic setup	Use template
	gatsby-template Gatsby template with basic setup	Use template
	redwood-template RedwoodJS template with basic setup	Use template

Community templates

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.

	Your template here Create a template with your stack and share it with the community	Submit template
	t3-template Next.js app router T3 stack template	Use template
	next-tailwind-template Next.js app router + Mantine + Tailwind template	Use template
	next-bun-template Next.js app router + Mantine + Bun template	Use template
	ship-template Fullstack boilerplate with Next.js, auth, MongoDB, Turborepo	Use template
	nx-vite-monorepo-template NX monorepo template with: Vite, GraphQL / Apollo, Typescript, Storybook / CSS Modules	Use template
	dashboard-template Vite + Redux + i18next + auth + Mantine dashboard template	Use template
	supabase-template Vite + Supabase + Mantine template	Use template
	waku-template Vite + Waku + Mantine template	Use template

Framework guide

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.

Recommended

Vite

Best choice for a single page application (SPA)

Recommended

Next.js

Best choice for an application with SSR

Remix

Get started with Remix

Redwood

Get started with RedwoodJS

Gatsby

Get started with Gatsby

Can I use Mantine with create-react-app?

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.

Get started without framework

Choose packages that you will use in your application:

	Package	Description
	`@mantine/hooks`	Hooks for state and UI management
	`@mantine/core`	Core components library: inputs, buttons, overlays, etc.
	`@mantine/form`	Form management library
	`@mantine/dates`	Date inputs, calendars
	`@mantine/charts`	Recharts based charts library
	`@mantine/notifications`	Notifications system
	`@mantine/code-highlight`	Code highlight with your theme colors and styles
	`@mantine/tiptap`	Rich text editor based on Tiptap
	`@mantine/dropzone`	Capture files with drag and drop
	`@mantine/carousel`	Embla based carousel component
	`@mantine/spotlight`	Overlay command center
	`@mantine/modals`	Centralized modals manager
	`@mantine/nprogress`	Navigation progress

Install dependencies:

yarn add @mantine/core @mantine/hooks

Install PostCSS plugins and postcss-preset-mantine:

yarn add --dev postcss postcss-preset-mantine postcss-simple-vars

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:

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',
      },
    },
  },
};

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:

// core styles are required for all packages
import '@mantine/core/styles.css';

// other css files are required only if
// you are using components from the corresponding package
// import '@mantine/dates/styles.css';
// import '@mantine/dropzone/styles.css';
// import '@mantine/code-highlight/styles.css';
// ...

Wrap your application with MantineProvider:

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

const theme = createTheme({
  /** Put your mantine theme override here */
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}

If your application has server side rendering, add ColorSchemeScript to the <head /> of your application:

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

function Demo() {
  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0"
        />
        <title>My awesome app</title>

        <ColorSchemeScript />
      </head>
      <body>{/* Your app here */}</body>
    </html>
  );
}

All set! You can now use Mantine components in your application.

Set up VS Code

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:

{
  "cssVariables.lookupFiles": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "node_modules/@mantine/core/styles.css"
  ]
}

Learn

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-mantine functions 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

Get help

Chat on Discord

Join a community of 10,000+ developers to ask questions, share feedback and explore upcoming features

Start a discussion

Request new features, ask questions and provide feedback with GitHub discussions

Help center

Explore 30+ frequently asked questions

Support Mantine

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.

Sponsor Mantine

Other ways to support the project:

Contribute financially by sponsoring the project on OpenCollective. Your sponsorship will help us to maintain the project and develop new features.
Share your feedback in GitHub Discussions – we are always happy to hear your thoughts on how to improve Mantine. Most of the new features and components are based on the feedback received 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 the source code of @mantine/* packages and provide your feedback on how it can be improved. 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.

Mantine for Figma

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.

License

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.

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog GitHub Releases

Community

Chat on Discord Follow on X Follow on Github GitHub discussions

Project

Mantine UI Help Center Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on X