Why sonner only show the latest notification (toast)?

[galih56]

At first, I thought my CSS or layout was covering the second toast’s title and message. Then I realized Sonner only shows the latest toast and keeps the previous ones hidden—probably just to run the stacking animation.

Why is it like that?

I’m using an Axios interceptor with a Zustand notification store to show all responses or errors using Sonner toasts. I set the gap to 50+, so when multiple errors happen, I expect them all to show up. But instead, Sonner hides the older ones and only shows the latest. The second and third toasts do show up visually, but their title and message aren’t visible.

Here’s my config:

<Toaster position="top-right" theme="system" gap={80}
  toastOptions={{
    classNames: {
      title: "text-white",
      description: "text-white",
      toast: "rounded-lg",
      success: "border-none bg-green-500 text-white",
      error: "border-none bg-destructive text-white",
      warning: "border-none bg-yellow-500 text-white",
      info: "border-none bg-blue-500 text-white",
      actionButton: "bg-white text-black",
    },
    style: {
      color: "white", // fallback text color
    },
  }}
/>

Even after forcing white text, it didn’t fix it.

I had to add this to my global CSS (index.css) to make the text visible:
/* override Sonner’s internal styles */
[data-sonner-toast] > * {
opacity: 1 !important;
}

[data-sonner-toast] [data-title],
[data-sonner-toast] [data-description] {
opacity: 1 !important;
color: white !important;
}

I’m not sure why it works like this. Maybe it’s intentional for animation purposes or UX reasons—but honestly, it feels kind of off.