How Sonner Won: Beautiful Motion, Tiny UX Details, and Great DX

Sonner differentiated itself with elegant branding, standout stacking animations, and a smooth, momentum-based swipe interaction model. Its DX is intentionally minimal—no context or hooks, an Observer-pattern state, and a friendly promise API—supported by strong documentation. Numerous small UX refinements (pause on hidden tab, hover-gap fill, pointer capture, friction) create a component that feels effortless and refined.

Key Points

• Distinctive branding and motion design (notably the stacking animation) made Sonner stand out in a crowded space.
• Interruptible CSS transitions replaced keyframes for smooth, retargetable animations; layout used absolute positioning, index-based transforms, and height-aware expansion.
• Swipe-to-dismiss is momentum-based with velocity thresholds, proper pointer capture, and friction for natural interactions.
• Developer experience is kept minimal: a single <Toaster />, a simple toast() function, Observer-pattern state, and a popular promise API.
• Small details (pausing when tab hidden, preserving hover state across gaps) accumulate into a product that feels intuitively right.