Styled Sonner Toasts

Component

About

A set of self-contained, animated toast/notification components (simple, tone-colored, glassmorphism, action-with-undo, and promise/loading-to-success) that stack in the bottom-right corner and dismiss automatically or on click.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Styled Sonner Toasts to your project and fits it to your theme.

Code

How Styled Sonner Toasts is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import SonnerStyled, {
  ToneToaster,
  GlassToaster,
  ActionToaster,
  PromiseToaster,
} from "@/components/ui/sonner-styled";

export default function SonnerStyledDemo() {
  return (
    <div className="flex min-h-[220px] w-full flex-wrap items-center justify-center gap-3 p-10">
      <SonnerStyled label="Simple toast" />
      <ToneToaster label="Tone toast" />
      <GlassToaster label="Glass toast" />
      <ActionToaster label="Action toast" />
      <PromiseToaster label="Promise toast" />
    </div>
  );
}