Usage with Gatsby.js

Get started with template

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

Open template page on GitHub
Click Use this template button
Clone or download the repository
Install dependencies: yarn
Start development server: npm start

Generate new application

Init new application:

npm init gatsby

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

	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/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 first 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);
};