Sonner
A React component that shows small pop-up notification messages (toasts).
- Stars
- 13.1k
- Forks
- 469
- Licence
- MIT
- Language
- TypeScript
- Last update
- 3 months ago
- Type
- Library
What it is
Sonner is a React component library for showing brief notification messages, called toasts, on screen. You place a Toaster component once in your app, then call toast() from anywhere to display a message. It is described by its author as an opinionated design, meaning it makes styling and behavior choices for you rather than offering many options.
- Show a confirmation message after saving a form
- Display an error toast when a network request fails
- Notify users when a background task finishes
Great for
- React developers who want quick, good-looking notifications without building their own
- Projects that need simple success or error messages after user actions
- Teams who prefer a ready-made component with minimal configuration
Not ideal for
- Developers who need a highly customized notification system, since the README describes it as opinionated
- Projects not using React, because the library is built for React
- Apps needing persistent in-page alerts rather than temporary toasts
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm · React
Install the library
npm install sonner - 2
Run it
- Install the package with npm install sonner.
- Import Toaster and toast from 'sonner'.
- Add <Toaster /> inside your app's component tree.
- Call toast('My first toast') from a button click or any other code.
- 3
Get the most out of it
- Read the full API reference at sonner.emilkowal.ski/getting-started for options
- Use the ask-sonner skill via npx skills add for help with Sonner-specific questions
- Read the author's write-up on building the component for design reasoning
Downloads
Strengths
- Simple setup: add one Toaster component and call toast() from anywhere
- Open source under the MIT license, free to use in commercial projects
- Actively maintained, with a recent push and a published v2.0.8 release
Trade-offs
- Opinionated design means less room to change behavior or appearance than more flexible libraries
- Documentation of the full API lives on an external site, not in the README shown here
- The README shown is truncated, so details about options and customization are not confirmed here
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| sonner (this) | 13.1k | Library | beginner | 3 months ago | React developers who want quick, good-looking notifications without building their own |
| react-hot-toast | 11k | Library | beginner | 2 months ago | React developers who need simple notification messages in a web app |
| react-toastify | 13.4k | Library | beginner | 9 days ago | React developers who need simple on-screen notifications |
| sweetalert2 | 18.1k | Library | beginner | 9 days ago | Web developers who want nicer popups than the browser's built-in alert and confirm boxes |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.