Usage with Remix

Get started with a template

The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and ESLint.

If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.


Remix template with full setup: Jest, Storybook, ESLint

Use template


Remix template with minimal setup – no additional tools included, only default Remix configuration

Use template

Generate new application

Follow Remix getting started guide guide to create new Remix application:

npx create-remix@latest


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

PostCSS setup

Install PostCSS plugins and postcss-preset-mantine:

yarn add --dev postcss postcss-preset-mantine postcss-simple-vars

Create postcss.config.js file at the root of your application with the following content:

module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em',

Enable PostCSS in Remix remix.config.js:

module.exports = {
  postcss: true,
  // ... other options


Add styles imports, MantineProvider and ColorSchemeScript to app/root.tsx:

// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';

import { cssBundleHref } from '@remix-run/css-bundle';
import type { LinksFunction } from '@remix-run/node';
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
import { MantineProvider, ColorSchemeScript } from '@mantine/core';

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),

export default function App() {
  return (
    <html lang="en">
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
        <ColorSchemeScript />
          <Outlet />
          <ScrollRestoration />
          <Scripts />
          <LiveReload />

All set! Start development server:

npm run dev

Hydration mismatch

Remix is known to have hydration mismatches when using some browser extensions that inject extra markup into the generated page, for example Google Translate, apollo dev tools, LanguageTool, etc. If you are experiencing hydration mismatches, try disabling browser extensions.

Related issues in Remix repository: Issue, Issue, Issue.

Because of this issue, you may see the following errors in the console depending on your setup:

  • Warning: Prop "data-mantine-script" did not match. Server: "null" Client: "true"
  • Warning: Expected server HTML to contain a matching <link> in <head>.
  • Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
  • Error: Hydration failed because the initial UI does not match what was rendered on the server.
  • Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Currently, Remix team is not planning to fix this issue. If you are experiencing hydration mismatches, try opening the same page in incognito mode (usually extensions are disabled in incognito mode) or disabling browser extensions.