Usage with Remix

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

Generate new application

Init new application:

npx create-remix@latest my-mantine-app
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
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 @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">
<StylesPlaceholder />
<Meta />
<Links />
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />

Replace entry.client.tsx with

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

All set! Start development server:

npm run dev

Server streaming support

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.

Next steps