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:
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/rte
Rich text editor based on Quill.js
@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

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