Install & Setup Vite + React + Typescript + Mantine UI

We will learn how to install & set up the vite react typescript Mantine UI app. We will use react 18 and Mantine UI 5. We can choose to install Mantine UI in react app by using the official Mantine Vite template or starting a brand-new react app with Mantine UI and vite.

How to Use Mantine in Next.JS 13

Use Vite Mantine + Vite template

Official Mantine UI offers templates related to Mantine UI + Vite. All you have to do is clone the repository and install Dependency.

Run the following command to generate a clone of the repository.

git clone https://github.com/mantinedev/mantine-vite-template.git

Move to project.

cd mantine-vite-template

Install dependency as well as run the project via npm.

npm install && npm run dev

or

Install dependency via yarn.

yarn

Run project via yarn.

yarn dev

src/App.tsx

import { Text, Button, Stack } from "@mantine/core";
import { ThemeProvider } from "./ThemeProvider";

export default function App() {
  return (
    <ThemeProvider>
      <Stack align="center" mt={50}>
        <Text size="xl" weight={500}>
          Welcome to Mantine!
        </Text>
        <Button>Click the button</Button>
      </Stack>
    </ThemeProvider>
  );
}

install mantine ui

Install Mantine UI in React App with Vite

Create react app with vite.

yarn create vite mantine-vite --template react-ts

Move to project.

cd mantine-vite

Install Mantine UI Dependencies:

install mantine ui via yarn.

yarn add @mantine/core @mantine/hooks @emotion/react 

install mantine ui via npm.

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

Next, replace src/App.tsx with below code.

src/App.tsx

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

export default function App() {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <Text> Install & Setup Vite + React + Typescript + Mantine UI</Text>
      <Button>Button</Button>
    </MantineProvider>
  );
}

Everything is done. You are ready to run a project.