Stacked toast notifications
Toasts stack like a deck, fan out on hover and swipe away. Free.
Use it in Next.js
"use client";
import { Toaster, toast } from "@/components/toast-stack/ToastStack";
export default function Page() {
return (
<>
<Toaster />
<button onClick={() => toast("Saved")}>Save</button>
</>
);
}Install
- One command
npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/toast-stack.json - Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.
Props
- visibleToasts
- cards in the collapsed deck
- duration
- auto-dismiss in ms
- backdrop
- blur behind the fanned list
- strategy
- fixed or absolute
Questions
Does the toaster work in Next.js?
Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.
Can a toast show a promise?
Yes. It goes from spinner to check when the promise resolves.
Is it really free?
Yes. MIT licence, no email needed for the registry install.
Can Cursor or v0 add it for me?
Yes. The folder has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code.