Usage with Gatsby.js

Mantine is fully compatible with Gatsby.js, follow following guide to setup your application

Using a plugin

The simplest way to get started with Mantine in Gatsby is to use a plugin:

  1. Install plugin:
yarn add gatsby-plugin-mantine
npm install gatsby-plugin-mantine
  1. Add plugin to your gatsby-config.js
module.exports = {
plugins: ['gatsby-plugin-mantine' /* ...other plugins */],
  1. All done! Server side rendering is fully functional

Without plugin

To setup server side rendering without gatsby-plugin-mantine:

  1. Install @mantine/ssr
yarn add @mantine/ssr
npm install @mantine/ssr
  1. Create gatsby-ssr.js file with following code:
import React from 'react';
import { renderToString } from 'react-dom/server';
import { createStylesServer, ServerStyles } from '@mantine/ssr';
const stylesServer = createStylesServer();
export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString, setHeadComponents }) => {
const html = renderToString(bodyComponent);
setHeadComponents([<ServerStyles html={html} server={stylesServer} />]);
  1. All done! Server side rendering is fully functional
Build fully functional accessible web applications faster than ever
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback