Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Promise Toast with Error
A Sonner promise toast that formats error messages using the rejected error details for specific failure feedback
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Generic error failed messages tell users nothing—what actually went wrong? This React promise toast with error formatting shows specific error details. Built with Sonner and shadcn/ui, the error callback receives the error object—perfect for API failures, network errors, validation failures, permission denials, timeout errors, or any async operation where showing the actual error message (network timeout, invalid input, server error) helps users understand what happened instead of seeing generic failure notifications.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Promise Toast
Simple promise toast with static messages
Promise Toast with Data
Promise toast using resolved data
Loading Toast
Standalone loading toast
Error Toast
Error notification toast
Toast with Action Button
Toast with retry action button
Form Validation
Form with validation errors