mui-sonner is is a package that combines sonner and MUI to achieve a simple, opinionated toast component for react.

If you are not using MUI, you should use sonner directly.

Demo

View demo

Documentation

View the documentation

Features

• Avoids Context: Like sonner, it doesn't use context.
• Alerts: The toast that is actually built around using the Alert component from MUI, so it's easy to customize.
• Styling: Leverages MUI components, meaning the toast and components inside it will use your already defined MUI theme.

Usage

npm install mui-sonner

Add to your app, preferably quite high in the tree. After that you can use toast() from anywhere in your app.

import { Toaster, toast } from "mui-sonner";

// ...

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast("My first toast")}>toast please</button>
    </div>
  );
}