Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Toast with Multi-line Content
Next: Toast with Action Button

Toast with Rich HTML Content

Toast with fully custom React JSX content including avatar badge timestamp for complex notification layouts

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.

Toast with Rich HTML Content preview

Scroll to load preview

Installation

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

FAQ

Was this page helpful?

Sign in to leave feedback.

Toast with Multi-line Content

Success toast with multi-line description text that automatically wraps for detailed contextual information

Toast with Action Button

A Sonner toast notification with an action button that lets users perform or undo operations directly from the toast