Toast Playground

Customize every aspect of your toast and see it in real-time

Live Preview

Custom Toast

This is a customized toast message

Basic Settings

Title

Description

Position

Duration (ms)

Variant

Appearance

Theme

Background

Text

Accent

Show Icon

Hide Progress BarShow Actions

💡 Quick Tips

• Use variant presets for quick styling
• Set duration to 0 for persistent toasts
• Add actions for interactive notifications
• Copy config to use in your code

Generated Code

toast({
  title: "Custom Toast",
  description: "This is a customized toast message",
  duration: 4000,
  icon: <FaRocket />,
  style: {
    background: "#f9f7ef",
    color: "#2A1A10",
    accent: "#1a1a1a",
  },
})