Usage with RedwoodJS

Generate new application

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

bash

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

Installation

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

Open the web directory before installing dependencies:

bash

cd web

PostCSS setup

Install PostCSS plugins and postcss-preset-mantine:

Create a postcss.config.js file in the 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 the web/src/App.tsx file:

tsx

// 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 the development server:

bash

yarn rw dev