Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Toast with Rich HTML Content
Toast with fully custom React JSX content including avatar badge timestamp for complex notification layouts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes Sonner's title and description aren't enough—go full custom. This React toast passes complete JSX as the message with avatar, badge, message text, and timestamp. Built with shadcn/ui Button and Tailwind utilities for layout, rich content gives total control over toast structure—perfect for chat notifications, social media alerts, comment mentions, collaboration updates, activity feeds, or any notification where standard title-description format can't express the visual hierarchy and complexity your design demands.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Toast with Description
Standard title and description format
Toast with Multi-line Content
Multi-line plain text description
Toast with Custom Icon
Toast with custom Lucide icon
Standard Avatar
Avatar component with initials
Standard Badge
Badge component for status
Info Alert
Alert with custom structured content
Questions you might have
React Sonner - Toast with Multi-line Content
Success toast with multi-line description text that automatically wraps for detailed contextual information
React Sonner - Toast with Action Button
A Sonner toast notification with an action button that lets users perform or undo operations directly from the toast