Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Toast with Multi-line Content
Success toast with multi-line description text that automatically wraps for detailed contextual information
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes one line of description isn't enough—let it wrap naturally. This React success toast uses Sonner with a longer description that spans multiple lines when rendered. Built with shadcn/ui Button and toast.success for semantic green styling, the multi-line text provides comprehensive context without truncation—perfect for detailed success confirmations, multi-sentence explanations, profile updates with multiple changes, complex operation results, or any notification where completeness matters more than brevity and users benefit from full details at a glance.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Toast with Description
Toast with single-line description
Toast with Custom Duration
Toast with extended 10-second duration
Toast with Rich HTML
Toast with complex custom layout
Success Toast
Semantic success toast with icon
Success Alert
Success alert for persistent messages
Standard Toast
Basic single-line toast