Usage with Remix

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 run dev

Generate new application

Init new application:

npx create-remix@latest my-mantine-app

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/remix @emotion/server @emotion/react

npm install @mantine/core @mantine/hooks @mantine/remix @emotion/server @emotion/react

Replace your entry.server.tsx file with

import { renderToString } from 'react-dom/server';
import { RemixServer } from '@remix-run/react';
import type { EntryContext } from '@remix-run/node';
import { injectStyles, createStylesServer } from '@mantine/remix';

const server = createStylesServer();

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  let markup = renderToString(<RemixServer context={remixContext} url={request.url} />);
  responseHeaders.set('Content-Type', 'text/html');

  return new Response(`<!DOCTYPE html>${injectStyles(markup, server)}`, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

Add MantineProvider and StylesPlaceholder to the root.tsx file:

import type { MetaFunction } from '@remix-run/node';
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
import { MantineProvider, createEmotionCache } from '@mantine/core';
import { StylesPlaceholder } from '@mantine/remix';
import { theme } from './theme';

export const meta: MetaFunction = () => ({
  charset: 'utf-8',
  title: 'New Remix App',
  viewport: 'width=device-width,initial-scale=1',
});

createEmotionCache({ key: 'mantine' });

export default function App() {
  return (
    <MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
      <html lang="en">
        <head>
          <StylesPlaceholder />
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
          <LiveReload />
        </body>
      </html>
    </MantineProvider>
  );
}

Replace entry.client.tsx with

import { RemixBrowser } from '@remix-run/react';
import { hydrate } from 'react-dom';
import { ClientProvider } from '@mantine/remix';

hydrate(
  <ClientProvider>
    <RemixBrowser />
  </ClientProvider>,
  document
);

All set! Start development server:

npm run dev

Mantine is based on emotion which currently does not support renderToPipeableStream, default Remix boilerplate will not support Mantine (and other component libraries based on css-in-js). It is important to replace your entry.server.tsx with code provided in this guide in order for server side rendering to work.