How to Install Mantine: A Step-by-Step Guide

Mantine is a popular React component library that provides a vast array of customizable UI components and hooks, making it easy for developers to create modern, responsive, and accessible web applications. In this article, we will cover the step-by-step process of installing Mantine in your React project, including different methods based on your project setup, and how to start using its powerful features.

Prerequisites

Before installing Mantine, ensure that the following prerequisites are met:

1. React: Mantine requires React version 17 or later.
2. Node.js: Make sure you have Node.js installed.
3. Package Manager: You can use either npm or yarn to manage dependencies.
4. Code Editor: A code editor like Visual Studio Code is recommended for working with your project.

If you haven’t set up a React project yet, follow these steps to create one.

1. Create a React Project

To start with a fresh React project, use the following command to set up a new application using the Create React App tool:

npx create-react-app my-mantine-app
cd my-mantine-app
npm start

This will create a basic React project and start a development server. Now you’re ready to install Mantine.

2. Installing Mantine

Mantine’s core components and hooks are available as separate packages. You’ll need to install both to get the basic functionality of Mantine.

a. Install Core Components and Hooks

You can install Mantine using npm or yarn:

Using npm:

npm install @mantine/core @mantine/hooks

Using yarn:

yarn add @mantine/core @mantine/hooks

These commands install the core Mantine library and its collection of hooks for state and UI management.

b. Install Additional Mantine Packages (Optional)

Depending on your project’s needs, you can install additional Mantine packages. Some popular options include:

• @mantine/notifications – for adding notifications to your app.
• @mantine/form – for managing forms.
• @mantine/dates – for date pickers and calendars.
• @mantine/dropzone – for drag-and-drop file uploads.

For example, to install the notifications system, use the following:

npm install @mantine/notifications

Or for yarn:

yarn add @mantine/notifications

These additional packages enhance your application with specialized functionality.

3. Setting Up Mantine in Your Project

Once the necessary packages are installed, the next step is to integrate Mantine into your React app.

a. Import and Use Mantine Components

Start by importing Mantine’s components and wrapping your app in the MantineProvider, which will manage global styles and theming.

In your src/App.js (or src/App.tsx if using TypeScript), replace the default code with the following:

import React from 'react';
import { MantineProvider, Button } from '@mantine/core';

function App() {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <div>
        <h1>Welcome to Mantine</h1>
        <Button>Hello Mantine</Button>
      </div>
    </MantineProvider>
  );
}

export default App;

This basic example demonstrates how to add a Mantine button component to your app.

b. Theming and Customization

Mantine allows you to customize the look and feel of your application by defining themes. You can override the default theme with your own styles by configuring the MantineProvider.

Here’s how you can apply a custom dark theme:

import React from 'react';
import { MantineProvider } from '@mantine/core';

function App() {
  return (
    <MantineProvider theme={{ colorScheme: 'dark' }}>
      <div>
        <h1>Dark Mode Enabled</h1>
      </div>
    </MantineProvider>
  );
}

export default App;

You can extend this theme by modifying color schemes, typography, spacing, and other design elements to match your brand.

c. Responsive Design with Mantine

Mantine’s components are designed to be fully responsive out of the box. You can use its grid system to create layouts that adapt to different screen sizes. Here’s an example of a simple responsive layout:

import React from 'react';
import { Grid, Col } from '@mantine/core';

function App() {
  return (
    <Grid>
      <Col span={6}>Left Column</Col>
      <Col span={6}>Right Column</Col>
    </Grid>
  );
}

export default App;

The grid layout will automatically adjust based on the screen size, ensuring a responsive design.

4. PostCSS Configuration (Optional)

If your project uses PostCSS, you can further enhance your Mantine setup by installing the postcss-preset-mantine plugin. This is especially useful if you’re working with frameworks like Vite.

Install PostCSS dependencies:

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

Then, create a postcss.config.cjs file at the root of your project and add the following configuration:

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',
      },
    },
  },
};

This setup ensures that Mantine integrates smoothly with your PostCSS configuration.

Conclusion

Mantine is a powerful and flexible UI library for React that allows you to build beautiful, accessible, and responsive applications quickly. Its seamless integration with React, along with a wide array of customizable components, makes it an excellent choice for developers. Whether you need forms, buttons, notifications, or custom theming, Mantine has the tools you need to get started.

By following the steps outlined above, you should have Mantine up and running in your project. Explore the wide range of components in the official Mantine documentation to take full advantage of what it has to offer.