Sonner (Toast) Component
Clean toast notifications with solid ink borders and smooth animations.
Basic Toasts
Toast Types
Rich Content Toasts
Top Center Position
Toasts appearing from the top center of the screen.
Loading Toast
Click to see a loading toast that resolves to success after 2 seconds.
With Actions
Promise Toast
Automatically shows loading, success, or error states based on promise resolution.
All Positions
Toasts can appear in any corner or center position on the screen.
Duration Control
Control how long the toast remains visible.
Closable Toast
Toasts can be dismissed manually or programmatically.