An opinionated toast notification component for Angular, ported from the popular React library Sonner.
ngx-sonner is an Angular library for displaying toast notifications—temporary, non-intrusive messages that provide user feedback. It is a direct port of the popular React library Sonner, offering a similar API and feature set tailored for Angular developers. The library solves the need for a consistent, customizable, and easy-to-integrate toast system in Angular applications.
Angular developers (version 17.3.0 and above) who need a robust toast notification solution for their web applications. It is particularly useful for teams building user-facing applications that require real-time feedback, alerts, or status updates.
Developers choose ngx-sonner because it brings the proven design and extensive features of the React Sonner library to the Angular ecosystem. Its opinionated yet flexible API reduces boilerplate, while support for promises, custom components, and Tailwind CSS integration makes it adaptable to diverse project requirements.
An opinionated toast component for Angular. A port of @emilkowalski's sonner.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Automatically handles loading, success, and error states for async operations, reducing boilerplate code, as demonstrated in the promise toast examples with dynamic message functions.
Offers full control over appearance via inline styles, CSS classes, or unstyled Tailwind CSS mode, allowing per-toast or global styling configurations detailed in the styling section.
Includes keyboard navigation with default hotkeys (Alt+T) and customizable shortcuts, plus focus management for assistive technologies, enhancing usability as noted in the keyboard focus section.
Supports six screen positions for toasts, both globally and per-toast, enabling flexible placement without affecting other toasts, as shown in the dynamic position examples.
Requires Angular 17.3.0 or higher, excluding legacy projects without upgrades, as specified in the compatibility table—a hard limitation for teams on older versions.
Achieving custom styles, especially with Tailwind CSS, demands additional configuration and understanding of the classes structure, which can be cumbersome compared to drop-in styled components.
As a direct port of the React Sonner library, it may not fully leverage Angular-specific optimizations like change detection, potentially leading to subtle performance issues in complex apps.