DEV Community

Cover image for Introduction to Mantine UI Library
Refine profile image Necati Özmen
Necati Özmen for Refine

Posted on • Originally published at refine.dev

Introduction to Mantine UI Library

#react #webdev #ui #css


refine repo

Author: Marvel Ken

Introduction

Mantine is a lightweight and easy-to-use library that provides a wide range of components and hooks for building high-performance web applications. It is built on top of React and TypeScript, making it a great choice for building modern web applications.

Setting Up Mantine UI

Mantine can be used with React,Refine, Next, Vite, Remix, and Gatsby.

In this article, we will be using Next. To install Mantine in a Next application follow the detailed steps below:

npx create-next-app@latest --typescript
Enter fullscreen mode Exit fullscreen mode

Mantine has a list of packages that can be used in your project this is what they look like:

mojo framework

By selecting anyone you could add them to the installation process:

npm install @mantine/core @mantine/hooks
Enter fullscreen mode Exit fullscreen mode

Now let's setup MantineProvider in our application:

Set up MantineProvider

In your Next.js application, you'll want to wrap your entire app with the MantineProvider component. You can do this by creating a _app.js file in your pages directory if it doesn't already exist, and then import MantineProvider and wrap your Component with it. Here's an example of what your _app.js file might look like:

import React from "react";
import { MantineProvider } from "@mantine/core";
import "../styles/globals.css"; // Import your global styles here

function MyApp({ Component, pageProps }) {
  return (
    <MantineProvider>
      <Component {...pageProps} />
    </MantineProvider>
  );
}

export default MyApp;
Enter fullscreen mode Exit fullscreen mode

Start Using Mantine Components

You can now start using Mantine components in your Next.js application. For example, create a new component in the components directory and use Mantine components inside it:

import React from "react";
import { Button } from "@mantine/core";

function MyComponent() {
  return <Button>Hello, Mantine!</Button>;
}

export default MyComponent;
Enter fullscreen mode Exit fullscreen mode

Then, import and use MyComponent in your pages:

import React from "react";
import MyComponent from "../components/MyComponent";

function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js App with Mantine!</h1>
      <MyComponent />
    </div>
  );
}

export default Home;
Enter fullscreen mode