notificationsnext.js13mantine

Mantine Notification in NextJs 13 is not shown at bottom right and always extends on full with of screen

I am using NextJs 13.5.2 and want to use the Mantine Notifications. The of my layout.tsx file looks like this.

import "@mantine/core/styles.css";
import React from "react";
import { MantineProvider, ColorSchemeScript } from "@mantine/core";
import { Notifications } from "@mantine/notifications";
import { theme } from "../theme";
import { Header1 } from "@/components/header1/header1";

export const metadata = {
  title: "Test",
  description: "Test description",
};

export default function RootLayout({ children }: { children: any }) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript />
        <link rel="shortcut icon" href="/favicon.svg" />
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
        />
      </head>
      <body>
        <MantineProvider theme={theme}>
          <Header1 />
          {children}
          <Notifications position="bottom-right" />
        </MantineProvider>
      </body>
    </html>
  );
}

I want the Mantine Notifications to be shown at the bottom right corner of the screen like in the example in the documentation https://mantine.dev/x/notifications/ However, when I trigger a notification by usingnotifications.show({title: "Test",message: "Test",}); it looks like this: enter image description here

Solution

  • You need to add:

    import '@mantine/notifications/styles.css';