Usage with Gatsby.js

Get started with template

The easiest way to get started is to use the template on GitHub:

  1. Open template page on GitHub
  2. Click Use this template button
  3. Clone or download the repository
  4. Install dependencies: yarn
  5. Start development server: npm start

Generate new application

Init new application:

npm init gatsby
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/notifications
Notifications system
@mantine/prism
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 gatsby-plugin-mantine @emotion/server @emotion/react
npm install @mantine/core @mantine/hooks gatsby-plugin-mantine @emotion/server @emotion/react

Add gatsby-plugin-mantine in your gatsby.config.js file:

module.exports = {
plugins: ['gatsby-plugin-mantine' /* ...other plugins */],
};

All set! Start development server:

npm start

Usage without plugin

If you want to provide custom emotion cache you will need to setup server side rendering on your side without plugin.

Init new application:

npm init gatsby
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/notifications
Notifications system
@mantine/prism
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 @mantine/ssr @emotion/react
npm install @mantine/core @mantine/hooks @mantine/ssr @emotion/react

Create gatsby-ssr.js file with following code:

import React from 'react';
import { renderToString } from 'react-dom/server';
import { createStylesServer, ServerStyles } from '@mantine/ssr';
// optional: you can provide your cache as a fist argument in createStylesServer function
const stylesServer = createStylesServer();
export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString, setHeadComponents }) => {
const html = renderToString(bodyComponent);
setHeadComponents([<ServerStyles html={html} server={stylesServer} />]);
replaceBodyHTMLString(html);
};

All set! Start development server:

npm start

Next steps