Toast Notifications
In this tutorial, we’ll learn how to create toast notifications for Next.js applications using Sonner.
This guide shows how to add toast notifications to your web app using the Sonner component library. We’ll cover installation, setup in a Next.js app, and examples for success and error messages. By following this, you’ll improve user interaction with instant feedback.
✨ Prerequisites
- Basic knowledge of React and Next.js
- Node.js installed on your machine
- A Next.js project set up
- Shadcn/UI already setup in your project (see installation guide)
Project Structure (Next.js 13+)
Integrate Sonner
Installation
To start, install the Sonner library in your app using npx (or via other installation options):
The executable above will add a sonner component inside of the components/ui
directory.
This component will be used to display toast notifications globally in your app! You can customize the appearance of the toast notifications by modifying the classNames
object in the toastOptions
prop.
Adding Sonner
provider component
that wraps your entire app within the root layout file. However, for simplicity, we’ll add sonner directly.Import the Toaster component inside the root layout file.
Add the Toaster component to the Root Layout function in the layout.tsx file.
Calling and using Sonner
Inside of any component or page, you can now import and call the Sonner component to display a toast notification.
Display a success message
View full docs to see all the available options for the toast
function.
🎉 Done!
Was this page helpful?