Sonner

An opinionated toast component for React.
GitHub
10.3k
Created 2 years ago, last commit a month ago
80 contributors
305 commits
Stars added on GitHub, month by month
5
6
7
8
9
10
11
12
1
2
3
4
2024
2025
Stars added on GitHub, per day, on average
Yesterday
+12
Last week
+6.3
/day
Last month
+6.9
/day
Last 12 months
+8.5
/day
npmPackage on NPM
sonner
2.0.3
Monthly downloads on NPM
5
6
7
8
9
10
11
12
1
2
3
4
2024
2025
No dependencies
README
SolarFlow.mp4

Sonner is an opinionated toast component for React. You can read more about why and how it was built here.

Usage

To start using the library, install it in your project:

npm install sonner

Add <Toaster /> to your app, it will be the place where all your toasts will be rendered. After that you can use toast() from anywhere in your app.

import { Toaster, toast } from 'sonner';

// ...

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

Documentation

Find the full API reference in the documentation.