Usage with Redwood | Mantine

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 oxlint.

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

RedwoodJS template with basic setup

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

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

Open the web directory before installing dependencies:

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

Recharts based charts library

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

Full-screen media lightbox with carousel navigation

Overlay command center

Centralized modals manager

Install dependencies:

Install PostCSS plugins and postcss-preset-mantine :

Create a postcss.config.js file in the web directory with the following content:

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

All set! Start the development server:

Usage with Storybook

Recommended articles