Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

Usage with RedwoodJS

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.

redwood-template

RedwoodJS template with basic setup

Use template

Generate new application

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

yarn create redwood-app my-redwood-project --typescript

Installation

Note that it is recommended to use yarn instead of npm to install dependencies.

Open web directory before installing dependencies:

cd web

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.js file in web directory 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',
      },
    },
  },
};

Setup

Add styles imports, MantineProvider and ColorSchemeScript to web/src/App.tsx file:

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

import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web';
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo';
import FatalErrorPage from 'src/pages/FatalErrorPage';
import Routes from 'src/Routes';
import { ColorSchemeScript, MantineProvider } from '@mantine/core';

const App = () => (
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
      <ColorSchemeScript />
      <MantineProvider>
        <RedwoodApolloProvider>
          <Routes />
        </RedwoodApolloProvider>
      </MantineProvider>
    </RedwoodProvider>
  </FatalErrorBoundary>
);

export default App;

All set! Start development server:

yarn rw dev

Previous

Usage with Gatsby

Next

Usage with Storybook

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people