Mantine React Component Library

Have you ever spent hours trying to get a simple modal or a multi-select dropdown to look just right in React?

I have been developing React applications for years and have tried almost every UI library out there, from Material UI to Tailwind.

A few months ago, I discovered Mantine, and it completely changed how I approach my frontend workflow.

It’s not just a set of components; it’s a fully-featured ecosystem that handles everything from styling to form validation and hooks.

In this tutorial, I’ll show you why Mantine is my go-to choice and how you can use it to build high-quality applications.

What is Mantine React Component Library?

Mantine is an open-source React component library that focuses on developer experience and accessibility.

It comes with over 100 hooks and components, making it one of the most comprehensive libraries available today.

What I love most is that it doesn’t force a specific style on you; it is highly customizable and supports dark mode out of the box.

Whether you are building a small personal project or a large-scale enterprise dashboard, Mantine scales beautifully.

Method 1: Set Up Mantine in a React Project

The first thing you need to do is set up the core packages. I usually recommend installing the hooks and form packages right away.

To demonstrate this, let’s build a “US Mortgage Calculator” themed interface to see how these components look in a real-world scenario.

Step-by-Step Installation

Open your terminal in your project folder and run the following command to install the necessary dependencies:

npm install @mantine/core @mantine/hooks @emotion/react @mantine/form

Once installed, you must wrap your entire application in the MantineProvider. This is essential for the styles to work correctly.

Full Code Example: Basic Setup

Here is how I set up the root of my application in a standard React project.

import React from 'react';
import { MantineProvider, Container, Title, Paper, Text } from '@mantine/core';

function App() {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS theme={{ colorScheme: 'light' }}>
      <Container size="sm" py="xl">
        <Paper shadow="xs" p="md" withBorder>
          <Title order={1} align="center" mb="sm">
            US Real Estate Insights
          </Title>
          <Text size="lg" color="dimmed" align="center">
            Welcome to the premier portal for New York property analysis.
          </Text>
        </Paper>
      </Container>
    </MantineProvider>
  );
}

export default App;

I executed the above example code and added the screenshot below.

In this example, I used the Container and Paper components to create a clean, centered card for the header.

Method 2: Build a Functional Form with @mantine/form

One of the biggest headaches in React is handling form state and validation without the code becoming a mess.

Mantine provides a dedicated @mantine/form hook that I find much more intuitive than Formik or React Hook Form.

Let’s build a simple “California Property Tax Estimator” input form to see how this works in practice.

Full Code Example: Estimator Form

This code creates a validated form where users can enter their property value and see an instant calculation.

import React from 'react';
import { useForm } from '@mantine/form';
import { TextInput, NumberInput, Button, Box, Group, Title, Text } from '@mantine/core';

export function PropertyTaxCalculator() {
  const form = useForm({
    initialValues: {
      ownerName: '',
      propertyValue: 500000,
    },
    validate: {
      ownerName: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
      propertyValue: (value) => (value < 10000 ? 'Minimum property value is $10,000' : null),
    },
  });

  const estimatedTax = (form.values.propertyValue * 0.012).toLocaleString('en-US', {
    style: 'currency',
    currency: 'USD',
  });

  return (
    <Box sx={{ maxWidth: 400 }} mx="auto" mt="xl">
      <Title order={3} mb="md">California Tax Estimator</Title>
      <form onSubmit={form.onSubmit((values) => console.log(values))}>
        <TextInput
          withAsterisk
          label="Full Name"
          placeholder="John Doe"
          {...form.getInputProps('ownerName')}
        />

        <NumberInput
          mt="sm"
          label="Estimated Property Value (USD)"
          placeholder="500000"
          {...form.getInputProps('propertyValue')}
        />

        <Group position="apart" mt="xl">
          <Text weight={700} size="xl">Estimated Tax: {estimatedTax}</Text>
          <Button type="submit" color="blue">Save Record</Button>
        </Group>
      </form>
    </Box>
  );
}

I executed the above example code and added the screenshot below.

The getInputProps function is a brilliant way to link your state to the UI components with minimal code.

Method 3: Use Mantine Hooks for Responsive Design

I often find myself writing custom event listeners for window resizing, which is repetitive and error-prone.

Mantine’s @mantine/hooks package includes a useMediaQuery hook that is perfect for responsive layouts.

Suppose you want to change the layout of a “US City Weather Dashboard” based on whether the user is on a phone or a desktop.

Full Code Example: Responsive Layout

import React from 'react';
import { useMediaQuery } from '@mantine/hooks';
import { SimpleGrid, Card, Image, Text, Badge, Button, Group } from '@mantine/core';

export function WeatherDashboard() {
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (
    <SimpleGrid cols={isMobile ? 1 : 3} spacing="lg" mt="md">
      <Card shadow="sm" p="lg" radius="md" withBorder>
        <Card.Section>
          <Image
            src="https://images.unsplash.com/photo-1496417263034-38ec4f0b665a"
            height={160}
            alt="San Francisco"
          />
        </Card.Section>

        <Group position="apart" mt="md" mb="xs">
          <Text weight={500}>San Francisco, CA</Text>
          <Badge color="pink" variant="light">
            Foggy
          </Badge>
        </Group>

        <Text size="sm" color="dimmed">
          Current temp: 62°F. High humidity today across the Bay Area.
        </Text>

        <Button variant="light" color="blue" fullWidth mt="md" radius="md">
          View Details
        </Button>
      </Card>
      
      {/* You can repeat more Cards for Chicago, Miami, etc. */}
    </SimpleGrid>
  );
}

I executed the above example code and added the screenshot below.

By using isMobile to toggle the cols prop, the grid automatically adjusts from one column to three columns.

Method 4: Implement Dark Mode Easily

Users today expect dark mode in every application, and Mantine makes this surprisingly easy to implement.

You don’t need to write separate CSS files for light and dark themes; you just update the provider state.

I’ve found that using the ColorSchemeProvider is the most efficient way to handle this across a whole project.

Full Code Example: Dark Mode Switcher

import React, { useState } from 'react';
import { MantineProvider, ColorSchemeProvider, ActionIcon, Group, Paper, Text } from '@mantine/core';
import { IconSun, IconMoonStars } from '@tabler/icons-react';

export function DarkModeApp() {
  const [colorScheme, setColorScheme] = useState('light');
  const toggleColorScheme = (value) =>
    setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));

  return (
    <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
      <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
        <Paper p="xl" radius={0} style={{ minHeight: '100vh' }}>
          <Group position="right" mb="xl">
            <ActionIcon
              variant="outline"
              color={colorScheme === 'dark' ? 'yellow' : 'blue'}
              onClick={() => toggleColorScheme()}
              title="Toggle color scheme"
            >
              {colorScheme === 'dark' ? <IconSun size="1.1rem" /> : <IconMoonStars size="1.1rem" />}
            </ActionIcon>
          </Group>
          <Text size="xl" weight={700} align="center">
            The Dark Mode is {colorScheme === 'dark' ? 'Active' : 'Disabled'}
          </Text>
        </Paper>
      </MantineProvider>
    </ColorSchemeProvider>
  );
}

This setup allows you to create a seamless transition between themes that feels premium to the end user.

Best Practices for SEO and Performance with Mantine

When using Mantine, it is important to remember that it is a client-side library.

If you are using it with Next.js, make sure to follow the specific SSR (Server Side Rendering) setup to ensure search engines can crawl your styles.

I also recommend only importing the specific packages you need to keep your bundle size small.

Always use the built-in accessibility features, like the aria-label props, to make your apps usable for everyone.

Following these small steps can significantly improve your Google ranking and user retention.

I hope you found this tutorial on the Mantine React component library helpful!

It is truly a powerful tool that has made my life as a developer much easier over the last few years.

You may also like to read:

• Cypress React Component Testing
• React Dashboard Component Libraries
• How to Use React Arrow Function Components
• Custom Component Mapping in React Markdown

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/