Step 5: Mantine UI

To style the QuickNotes app, we will use a React component library called Mantine. First, install it as a dependency with its dependencies!

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

Next, update the main.jsx as follows to wrap the application root component with MantineProvider:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { MantineProvider } from "@mantine/core";

ReactDOM.createRoot(document.getElementById("root")).render(
  <MantineProvider withGlobalStyles withNormalizeCSS>
    <App />
  </MantineProvider>
);

The provider provides CSS reset and global styles, among other things.