Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Promise Toast with Data
A Sonner promise toast that uses resolved promise data in the success message for personalized feedback
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Generic success messages are boring—use the data you just fetched! This React promise toast with data interpolation personalizes success messages. Built with Sonner and shadcn/ui, the success callback receives promise data—perfect for user creation confirmations, record updates, search results, API responses, data mutations, or any async operation where showing specific details (names, IDs, counts) in the success message provides better feedback than generic confirmation messages.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Promise Toast
Simple promise toast with static messages
Promise Toast with Error
Promise toast with custom error formatting
Loading Toast
Standalone loading toast
Success Toast
Success notification toast
Form
Form with submission handling
Toast with Action Button
Toast with action button
Questions you might have
React Sonner - Basic Promise Toast
A Sonner promise toast that automatically transitions from loading to success or error based on promise resolution
React Sonner - Promise Toast with Error
A Sonner promise toast that formats error messages using the rejected error details for specific failure feedback