react-toast-notifications stopped at React 17, and on React 19 the first addToast call throws. Toast Stack is a free, MIT licensed toast component you add with one shadcn command, and the small shim below keeps your old addToast calls compiling while you move over.
import { Toaster } from "@/components/toast-stack/ToastStack";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Toaster />
</body>
</html>
);
}"use client";
import type { ReactNode } from "react";
import { toast } from "@/components/toast-stack/ToastStack";
// Same names as react-toast-notifications, so old call sites keep compiling while you migrate.
type Appearance = "success" | "error" | "warning" | "info";
type AddToastOptions = { appearance?: Appearance; autoDismiss?: boolean; autoDismissTimeout?: number };
// Toast Stack always times out. Ten minutes stands in for the old "stay until closed".
const STAY_MS = 10 * 60 * 1000;
export function useToasts() {
return {
addToast(content: ReactNode, options: AddToastOptions = {}, callback?: (id: number) => void) {
const kind = options.appearance === "warning" ? "error" : options.appearance ?? "info";
const duration = options.autoDismiss === false ? STAY_MS : options.autoDismissTimeout;
const id = toast[kind](content, { duration });
callback?.(id);
return id;
},
removeToast: (id: number) => toast.dismiss(id),
removeAllToasts: () => toast.clear(),
};
}"use client";
import { toast } from "@/components/toast-stack/ToastStack";
import { saveProfile, restoreProject } from "./actions";
export function SaveButton() {
return (
<button
onClick={() =>
toast.promise(saveProfile(), {
loading: { title: "Saving your profile" },
success: (profile) => ({ title: "Saved", description: `${profile.name} is up to date` }),
error: () => ({ title: "Couldn't save", description: "Check your connection and try again" }),
})
}
>
Save
</button>
);
}
export function ArchivedToast({ projectId }: { projectId: string }) {
return (
<button
onClick={() =>
toast.success("Project archived", {
action: { label: "Undo", onClick: () => void restoreProject(projectId) },
})
}
>
Archive
</button>
);
}"use client";
import HoldToDelete from "@/components/HoldToDelete";
import { deleteFile } from "./actions";
export function DeleteFile({ name, size }: { name: string; size: string }) {
return (
<HoldToDelete
fileName={name}
fileMeta={size}
fileType="PDF"
undoMs={5000}
onCommit={() => void deleteFile(name)}
/>
);
}npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/toast-stack.jsonAll comparisons, with prices read on each library's own site.
From the blog: Toast Notifications After a Next.js Server Action (Sonner, useActionState, redirect)
From the blog: findDOMNode Is Not a Function in React 19: Find It, Fix It
No. Its README opens with "Not Maintained", and the last release was 2.5.1 in July 2021. Its peer range stops at React 17.
Not in our test. It installs with --legacy-peer-deps, then throws "findDOMNode is not a function" the first time addToast runs.
npm won't install it next to React 19 without --legacy-peer-deps, because its peer range stops at React 18. With that flag it mounted and showed a notification on React 19 in our jsdom test, which isn't a real browser.
No. Mount <Toaster /> once in your root layout and call toast() from any client component.
Yes. The use-toasts.ts shim above keeps addToast, removeToast and removeAllToasts working on top of Toast Stack. Swap call sites over to toast() whenever you like, then delete the shim.
Yes. toast.promise shows a spinner, then turns into a check or an error when the promise settles.
Not with a prop. Positions live in toast-stack.css, so you'd change them there.
Yes, MIT licensed, with source on GitHub. Hold to Delete, mentioned above, is a paid piece.
Yes. The file is marked "use client", so the layout can stay a server component and still render <Toaster />.
Yes. The folder has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code.