feat: toaster transition duration option

[ynng3]

🚀 What's Changed
This PR introduces a new configuration option to the Toaster component, allowing users to control the speed of the transition animation.

• Added a transitionDuration property (Number in milliseconds) to the toastOptions object.
• This property dictates how long the toast's enter and exit animations (transitions) will last.

💡 Why This is Needed
As discussed in #690, the animation duration was previously fixed, which limited flexibility when integrating the component into different design systems.

This option resolves that by allowing developers to set the animation speed globally, ensuring the toast's appearance is perfectly synchronized with their application's UX flow—whether they need a lightning-fast notification or a leisurely slide-in.

🔧 How to Use
The duration can be set within the toastOptions when rendering the component:

<Toaster
  toastOptions={{
    // Set the transition duration to 400ms
    transitionDuration: 400,
  }}
/>

• Default: (State the current hardcoded default duration, e.g., 400ms)
• Unit: Milliseconds (ms)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
sonner	Ready	Preview	Comment	Nov 5, 2025 3:39pm

[emilkowalski]

Thanks, but this is an opinionated to toast and I'd like to minimize the amount of animation customization. Hope this makes sense!