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 } 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',
});
export default function App() {
return (
<MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
<html lang="en">
<head>
<Meta />
<Links />
<StylesPlaceholder />
</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

Next steps