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.

All 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 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.

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: Jest, 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 full setup: Jest, Storybook, ESLint	Use template
	remix-min-template Remix template with minimal setup – no additional tools included, only default Remix configuration	Use template
	gatsby-template Gatsby template with basic setup	Use template
	redwood-template RedwoodJS template with basic setup	Use template

Framework guide

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.

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/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

Create postcss.config.js 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 { MantineProvider, createTheme } from '@mantine/core';

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

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <App />
    </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 http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My awesome app</title>

        <ColorSchemeScript />
      </head>
      <body>
        <App />
      </body>
    </html>
  );
}

All set! Now you can use Mantine components in your application.

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

Join Discord community

Ask questions, share feedback, get updates, learn about upcoming features and more

Start a discussion

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

Support Mantine

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.

Mantine for Figma

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.

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 Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on Twitter