Getting Started

MUI Sonner is an opinionated toast component for MUI & React.

Install

pnpm i mui-sonner

Add Toaster to your app

It can be placed anywhere, but it's recommended to place higher up the component tree.

import { Toaster } from "mui-sonner";
 
export default function App({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

Render a toast

import { toast } from "mui-sonner";
 
const MyToast = () => {
    return (
    <button onClick={() => toast("Hello World")}>
      Render my toast
    </button>
    )
}

toast()