# emilkowalski/sonner

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/emilkowalski-sonner).**

_How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._

12,487 stars · 436 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/emilkowalski/sonner
- Homepage: https://sonner.emilkowal.ski
- awesome-repositories: https://awesome-repositories.com/repository/emilkowalski-sonner.md

## Topics

`notifications` `react` `toast`

## Description

Sonner is a React-based notification library designed for rendering transient, stackable feedback messages within web applications. It functions as a frontend system for managing and displaying time-limited alerts that inform users of system events or state changes during an active session.

The library utilizes a centralized state machine to manage the lifecycle of each notification, ensuring consistent visibility and removal. It coordinates these elements through an event-driven message bus and renders them into a detached container outside the main application hierarchy to maintain global stacking and positioning.

The system handles layout calculations and animations by dynamically updating browser properties, allowing for real-time adjustments based on the number and size of active notifications. It is built as a reusable component library for integration into React-based user interfaces.

## Tags

### User Interface & Experience

- [Toast Notifications](https://awesome-repositories.com/f/user-interface-experience/toast-notifications.md) — Provides a React-based library for displaying stackable, transient toast notifications.
- [Notification Systems](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/notification-systems.md) — Functions as a frontend notification system for managing and rendering transient feedback messages.
- [Alerts & Notifications](https://awesome-repositories.com/f/user-interface-experience/alerts-notifications.md) — Displays transient, time-limited alerts and feedback messages within the user interface. ([source](https://sonner.emilkowal.ski/getting-started))
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Provides a reusable React component library for consistent UI feedback and interaction.
- [Feedback and Overlay Components](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components.md) — Implements a feedback component for showing transient status updates and alerts during user sessions.
- [Stacking Calculators](https://awesome-repositories.com/f/user-interface-experience/layout-positioning/stacking-calculators.md) — Calculates real-time stacking offsets and positioning for transient notification elements.

### Web Development

- [Lifecycle State Management](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/component-lifecycle-utilities/state-preservation-controls/dialog-state-controllers/lifecycle-state-management.md) — Manages the lifecycle of transient notifications through a centralized state machine tracking visibility and timers.