Guide · Open source

How to use sonner: install, Toaster setup and toast() in React

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Sonner is an open-source toast component for React that shows brief notification messages on screen. This guide walks through installing it with npm, placing the Toaster in your app and calling toast() to display a message. By the end you will have a working notification in a React project.

Sonneremilkowalski/sonner · ★ 13.1k · MIT Install options & downloads

Quick start

1Install the package. Run npm install sonner in your project folder.
2Import Toaster and toast. Import both components from the sonner package in the file where you set up your app.
3Add Toaster to your app. Place the Toaster component once in your app, where all toasts will be rendered.
4Call toast() where needed. Call toast('your message') from any event handler or component in your app to display a notification.
5Check the API reference. Open the documentation at sonner.emilkowal.ski/getting-started for options beyond the basic example.

What sonner does and who it is for

Sonner is a React component library for showing temporary notification messages, called toasts. Its author describes it as an opinionated design, which means it makes styling and behavior choices for you instead of offering many options.

It suits React developers who want good-looking notifications without building their own, and projects that need simple success or error messages after user actions. It is built for React, so it is not a fit for projects that use other frameworks.

What you need before installing sonner

The project needs Node.js and npm, along with React. The README uses npm for installation, so a package-manager setup is the expected route.

Node.js and npm
React

Install sonner with npm

Run the install command from your project folder to add the library as a dependency.

npm install sonner

Add the Toaster component once to your app

Place the Toaster component in your app. This is the place where all your toasts are rendered, so add it once rather than on every page. Import both Toaster and toast from sonner.

The example below shows a button that displays a toast when clicked.

import { Toaster, toast } from 'sonner';

// ...

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast('My first toast')}>Give me a toast</button>
    </div>
  );
}

Show a toast from anywhere with toast()

After the Toaster is in your app, you can call toast() from anywhere in your app to display a message. Pass the text you want to show as the argument, as in the example above where the message is 'My first toast'.

Typical uses are confirming a successful save or reporting an error after a user action.

Call toast() inside an event handler such as a button click
Pass the message text as the first argument

Find the full API reference

The README covers only the basic setup. For the full API reference, see the documentation at sonner.emilkowal.ski/getting-started. The README also mentions an optional /ask-sonner skill that can help with installation and Sonner questions.

What people use it for

Confirming that a form was saved after a user submits it
Showing an error message when a request fails after a button click
Displaying a short notice that an action completed, such as copying text

Frequently asked questions

How do I install sonner?

Run npm install sonner in your project folder. You need Node.js, npm and React already set up in the project.

Is sonner free to use?

Sonner is released under the MIT licence, which is an open-source licence. Check the licence file in the repository for the full terms.

Do I need React to use sonner?

Yes. Sonner is a React component library, so it is built for React projects and will not work in projects that do not use React.

Why does my toast not appear?

The README says all toasts are rendered in the Toaster component, so make sure you have added <Toaster /> to your app. Then call toast() from inside your app. The README does not list other troubleshooting steps, so check the documentation for more help.

What are the alternatives to sonner?

The comparable projects listed for this item are react-hot-toast, react-toastify and notistack. Compare them on the styling and configuration options you need.

Can I customize sonner's look and behavior?

Sonner is described as opinionated, so it makes many styling and behavior choices for you. If you need a highly customized notification system, a less opinionated library may suit you better.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Sonner suits React developers who want quick, good-looking toast notifications with minimal setup. It is a weaker fit if you need a highly customized notification system or persistent in-page alerts, and it does not work outside React.

Install options & downloads