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

Remix template with basic setup

Use template

Generate new application

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

npx create-remix@latest

Installation

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/charts

Recharts based charts library

@mantine/notifications

Notifications system

@mantine/code-highlight

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

PostCSS setup

Install PostCSS plugins and postcss-preset-mantine:

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

Create postcss.config.cjs 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
};

Setup

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 { ColorSchemeScript, MantineProvider } from '@mantine/core';

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

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

All set! Start development server:

npm run dev