Shadcn Sonner
React toast for non-blocking notifications and user feedback with smooth animations. Built with TypeScript and Tailwind CSS for Next.js.
Toast notifications broken?
Join our Discord community for help from other developers.
You know those little notifications that pop up to tell you something worked? Or when you need to undo an action? Ever notice how the best apps make these feel polished instead of jarring interruptions? This shadcn/ui sonner makes toast notifications feel thoughtful and professional in your React applications.
Sonner showcase
Clean, simple toast messages:
Just import and call toast() anywhere in your app. This free open source component handles positioning, animations, and accessibility so your notifications enhance user experience instead of disrupting workflow. Styled with Tailwind CSS to match your design system instead of generic browser alerts.
npx shadcn@latest add sonnerWhy sonner actually beats basic alerts
Here's the thing—most notification systems are terrible because they interrupt users at the worst possible moments. Think about those modal alerts that stop everything you're doing just to say "Success!" or browser notifications that cover important interface elements. Good toast notifications appear when they're relevant and disappear gracefully.
Sonner lets users keep working while showing contextual feedback. Need to confirm a file upload? Show progress and success without blocking the interface. Made a mistake? Offer instant undo actions right in the notification. Users get the feedback they need without losing focus or momentum.
This free shadcn sonner handles the complex parts—smart positioning, smooth animations, keyboard accessibility, mobile gestures—while you focus on providing meaningful feedback at the right moments. Whether you're building form confirmations, progress indicators, or undo systems in your Next.js applications, notifications that enhance workflow keep users productive in your JavaScript projects.
Common sonner patterns you'll actually use
Success and error messages
Different message types with appropriate styling:
Promise and loading states
Automatic progress feedback for async operations:
Custom notification content
Rich notifications with icons and custom JSX:
Undo and action notifications
Let users reverse actions immediately:
Persistent system messages
Important notifications that stay until dismissed:
Features
This free open source toast component includes everything you need:
- TypeScript-first - Full type safety with notification events and state management
- Emil Kowalski created - Built by the creator of the original Sonner library
- Non-blocking interface - Users continue working while notifications provide feedback
- Tailwind CSS styled - Customize with utilities, not fighting notification positioning
- Promise integration - Automatic loading, success, and error states for async operations
- Mobile optimized - Swipe to dismiss with touch-friendly interactions
- Accessibility ready - Screen reader announcements and keyboard navigation
- Smart positioning - Never covers critical interface elements or user content
API Reference
Core Functions
| Function | Purpose | Use Case |
|---|---|---|
toast(message) | Basic notification | Simple confirmations and feedback |
toast.success(message) | Success notification | Completed actions, saved changes |
toast.error(message) | Error notification | Failed operations, validation errors |
toast.loading(message) | Loading notification | In-progress operations |
toast.promise(promise, options) | Promise handling | Automatic async operation feedback |
Configuration Options
| Option | Type | Purpose |
|---|---|---|
description | string | Additional context below main message |
duration | number | Auto-dismiss timing (4000ms default) |
action | object | Primary button with label and onClick |
icon | ReactNode | Custom icon for notification |
position | string | Override default toast position |
Toaster Setup
| Component | Purpose | Key Props |
|---|---|---|
<Toaster /> | Container for all toasts | position, theme, visibleToasts |
Production tips
Be specific with notification messages instead of generic feedback. This free shadcn/ui sonner component shows whatever text you provide—"File uploaded successfully" tells users more than "Success!" This TypeScript component handles the display—you provide messages that actually inform users about what happened in your Next.js applications.
Use promise integration for async operations and loading states. When users submit forms or upload files, they need progress feedback. This open source shadcn sonner automatically handles loading, success, and error states—provide clear messaging for each stage of the operation.
Enable undo actions for destructive operations immediately. Deleted something important? Let users reverse it right in the notification before it disappears. This JavaScript component supports action buttons—use them to provide safety nets for user mistakes and accidental actions.
Don't overwhelm users with notification spam. Too many toasts create noise that users learn to ignore. The Tailwind CSS styled component limits visible notifications automatically—be selective about what deserves user attention and when notifications actually help.
Position notifications thoughtfully based on your interface layout. Bottom-right works for most apps, but consider your user's workflow and screen real estate. This component supports any position—choose placement that complements your interface instead of fighting for attention.
Integration with other components
Sonner naturally works with Form components for validation feedback and submission confirmations in your React applications. Use Button components to trigger toast notifications for user actions and confirmations.
For complex workflows, combine sonner with Dialog components—use toasts for quick feedback, dialogs for complex confirmations. This open source pattern provides appropriate feedback levels for different interaction types.
When building data interfaces, pair sonner with DataTable components for bulk operation feedback or Progress components for file upload status. Alert components work alongside toasts for persistent warnings versus temporary notifications.
For user account features, use sonner with Avatar components for profile update confirmations or Badge components for status change notifications. Your JavaScript application can compose these shadcn components while maintaining consistent feedback patterns across different user interactions.
Questions you might have
Shadcn Slider
React slider for interactive range inputs and value selectors with drag controls. Built with TypeScript and Tailwind CSS for Next.js using Radix UI.
Shadcn Switch
React switch for toggle settings and preferences with smooth animations. Built with TypeScript and Tailwind CSS for Next.js using Radix UI.