Shadcn Sonner Toast: React Toast Notification Examples
Sonner is the opinionated toast component that shadcn/ui recommends for react toast notifications, and this page presents it fully styled for the shadcn design system with Tailwind CSS. A single Toaster component mounts once in your layout, and a simple toast function fires notifications from anywhere in your app, with stacking, swipe to dismiss, and pause on hover handled for you.
Twelve toast examples are collected here for copy and paste use. They span the practical range of notification work: success, error, warning, and info toasts, toasts with descriptions and action buttons, promise-based loading toasts, custom rendered content, and position and duration configurations, all typed TypeScript for Next.js.
What you get
- Semantic variants: Success, error, warning, and info toasts with matching icons and colors.
- Rich toasts: Titles with descriptions for notifications that need a second line of context.
- Action buttons: Toasts carrying an action such as undo or view, plus a cancel option.
- Promise toasts: A single call that shows loading, then resolves to success or error with the async result.
- Custom rendering: Fully custom toast bodies when the default layout is not enough.
- Placement and timing: Examples of position options and duration control, including persistent toasts.
Implementation tips
- Mount the Toaster once: Place one Toaster in your root layout and call the toast function everywhere else. Multiple toasters cause duplicate notifications.
- Use toast.promise for async work: It ties loading, success, and error into one notification and prevents orphaned loading states.
- Make undo the default pattern: For destructive actions, an undo action button on the toast is friendlier than a confirmation dialog for low-risk operations.
- Keep copy short: One line for the title and at most one for the description. Anything longer belongs in a dialog or page.
- Adjust for theme: Pass your theme to the Toaster so toasts follow light and dark mode along with the rest of the interface.
Where it fits in a dashboard
Toasts are the feedback channel for nearly every mutation in an admin app. Saving settings, deleting records, copying values, sending invites, and completing background jobs all deserve a brief confirmation that does not interrupt the user's flow, which is exactly the toast's job description.
The promise variant is particularly at home in dashboards. Wire it to a server action or API call and users see a loading toast that resolves into success or error, which covers the entire async lifecycle with one line of code.
Related components and patterns
Choosing the right feedback surface matters. Use an Alert for persistent inline messages that should stay on the page, an Alert Dialog when the user must confirm before something destructive happens, and a toast for transient confirmation after the fact.
Long-running work often pairs a toast with a Progress bar, and toasts triggered from form submissions typically follow a Button action. Complete notification flows appear in the app screens of the React dashboard templates.
Library support
Under the hood this is Sonner, the toast library by Emil Kowalski that has become the default choice in the React ecosystem for its animation quality and tiny API. The shadcn/ui Sonner docs cover the themed integration these examples build on. Sonner is not based on Radix UI or Base UI, so it adds no primitive dependencies and sits comfortably next to components from either library.