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: 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. These templates usually 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

next-app-tss-template

Next.js template with app router and tss (emotion based) setup

Use template

next-pages-tss-template

Next.js template with pages router and tss (emotion based) setup

Use template

t3-template

Next.js app router T3 stack template

Use template

nx-vite-monorepo-template

NX monorepo template with: Vite, GraphQL / Apollo, Typescript, Storybook / CSS Modules

Use template

vike-mantine-template

Vite ssr template with Vike

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:

PackageDescription
@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

Note that if you are using a framework that is not officially supported, you may need to set up PostCSS manually. Refer to the framework documentation to learn how to do that. For example, if you are using Webpack, you will need to install and configure 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}>
      <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
          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.

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

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.