Usage with Gatsby

Get started with a template

The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and ESLint.

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.


Gatsby template with basic setup

Use template

Generate new application

Follow Gatsby quick start guide to create new Gatsby application:

yarn create gatsby

When asked "Would you like to install a styling system?", select PostCSS.


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


Overlay command center


Centralized modals manager


Navigation progress

Install dependencies:

yarn add @mantine/core @mantine/hooks

PostCSS setup

Install PostCSS plugins and postcss-preset-mantine:

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

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


Create src/theme.ts file with your theme override:

// src/theme.ts
import { createTheme } from '@mantine/core';

export const theme = createTheme({
  fontFamily: 'serif',
  // ... other theme override properties

Create gatsby-ssr.tsx with the following content:

import { ColorSchemeScript, MantineProvider } from '@mantine/core';
import { theme } from './src/theme';

export const onPreRenderHTML = ({
}) => {
  const headComponents = getHeadComponents();
    <ColorSchemeScript key="color-scheme-script" />,

export const wrapPageElement = ({ element }) => {
  return <MantineProvider theme={theme}>{element}</MantineProvider>;

Create gatsby-browser.tsx with the following content:

// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';

import { MantineProvider } from '@mantine/core';
import { theme } from './src/theme';

export const wrapPageElement = ({ element }) => {
  return <MantineProvider theme={theme}>{element}</MantineProvider>;

All set! Start development server:

npm run develop

CSS modules

By default, Gatsby has different syntax for importing CSS modules:

// Default syntax – will not work in Gatsby
import classes from './Demo.module.css';

// Gatsby syntax
import * as classes from './Demo.module.css';