I'll create an interactive Sonner toast playground where you can customize colors, icons, and various settings in real-time.

I've created a comprehensive Sonner toast playground that lets you interactively customize every aspect of your toasts! Here's what you can tweak:

Features:

🎨 Content Customization:

• Message and description text
• Icons from Lucide React library
• Multiple toast types (success, error, warning, info, loading, promise, custom)

🎯 Appearance Settings:

• Position (6 different positions)
• Theme (light, dark, system)
• Rich colors toggle
• Close button toggle
• Dismissible behavior
• Expand animation

⚙️ Behavior Controls:

• Duration slider (1-10 seconds)
• Visible toasts limit
• Gap between toasts
• Offset from screen edges

🌈 Custom Colors:

• Background, foreground, border colors
• Success, error, warning, info colors
• Live color picker with hex input

🚀 Interactive Preview:

• 9 different toast types to test
• Real-time settings display
• Dismiss all functionality

The app provides a beautiful, responsive interface where you can experiment with all Sonner toast options and see the results immediately. Perfect for finding the right toast configuration for your projects!