MUI-Sonner

An opinionated toast library for Material UI and React

Based on the original sonner

Documentation

Features

Easy to use & setup

Accessible

Uses your MUI theme

Lightweight

Pause on hover

Supports Emojis

RTL support

Responsive

Dismiss on drag

Stacked notifications

Promise API

Possibility to update a toast

Installation

npm install mui-sonner
Usage

Add Toaster to your app.

<div><Toaster/></div

Start toasting - call it from anywhere!

toast("Hello World")
Types

You can customise the type of toast you want to render, and pass in additional options as an object in the second argument.

toast("Hello world!")
Position

Swipe direction changes depending on the position.

<Toaster position='top-left' />
Styling

By default the toast is styled to match your MUI theme's Alert and AlertTitle components.

If you want to override your default theme styles, you can do this in multiple ways

<Toaster alertSx={{p:2}}/>