Create Mantine Project

Starting a Mantine v7 Project with a Template

Mantine v7 provides templates to help you kickstart your project. In this guide, we'll show you how to start a Mantine v7 project by copying the "next-app-template" from the official Mantine website.

Step 1: Open the Mantine v7 Template Page

Visit the Mantine v7 Getting Started page by opening your web browser and navigating to the following URL: https://v7.mantine.dev/getting-started (opens in a new tab).

Step 2: Select the "next-app-template"

On the Mantine v7 Getting Started page, you will see various templates. Locate the "next-app-template" and click on the "Use Template" button next to it.

Step 3: Create a New Repository

After clicking "Use Template," you will be redirected to the GitHub repository for the selected template. Here, you have the option to "Use this template." Click on the "Use this template" button.

Step 4: Fill in Repository Details

Now, you will be taken to a page where you can create a new repository based on the selected template. Fill in the details of your repository:

Repository name: Choose a name for your new repository.
Description (optional): Provide a brief description of your project.
Visibility: Choose between "Public" or "Private" for your repository's visibility.
Additional options: You can choose to initialize the repository with a README file, add a .gitignore file, and select a license.

Step 5: Create Repository

After filling in the repository details, click the "Create repository" button to create your new GitHub repository.

Step 6: Clone the Repository Locally

Now that your repository is created, you can clone it to your local machine. Open your terminal and navigate to the directory where you want to create your local project folder.

Use the following command to clone the repository (replace <repository-url> with your actual repository URL):

git clone <repository-url>

Step 7: Install Project Dependencies

Navigate to the project directory that you just cloned and run the following command to install all the project dependencies using Yarn:

cd your-repository-name
yarn install

Implementing a Custom Color Scheme with Mantine's ThemeProvider

Implementing a custom color scheme for Mantine's ThemeProvider in a React application involves configuring and customizing the theme object. Mantine provides a way to define a custom color scheme by modifying its theme settings.

In this guide, we'll walk through the process of creating a custom color scheme for your React application using Mantine's ThemeProvider.

Step 1: Create a Theme Directory

Inside the "theme" directory, create a file named "theme.ts" and place the following code:

'use client';
 
import { createTheme, MantineThemeOverride } from '@mantine/core';
 
export const theme: MantineThemeOverride = createTheme({
 
    colors: {
        primary: [
            '#e6fdf8',
            '#d9f3ee',
            '#b6e5dc',
            '#8fd6c8',
            '#70c9b7',
            '#5ac1ad',
            '#4dbea8',
            '#3ca792',
            '#2e9582',
            '#178270',
        ],
    },
    primaryShade: 6,
    primaryColor: 'primary',
});

Be sure to replace the color values with your preferred custom colors. You can also customize other theme properties as needed.

Step 3: Import Your Custom Theme

In your application's layout file (e.g., app/layout.tsx), import your custom theme and apply it using Mantine's MantineProvider:

import '@mantine/core/styles.css';
import React from 'react';
import { MantineProvider } from '@mantine/core';
import { theme } from '@/theme/theme';
 
export default function RootLayout({ children }: { children: any }) {
  return (
      <body>
        <MantineProvider theme={theme}>{children}</MantineProvider>
      </body>
  );
}

Make sure to adjust the import path to your custom theme file as necessary.

Adding components to existing project Setup