Toast notification stack in Framer Motion

Toasts stack like a deck, fan out on a spring when you hover and fly off when you swipe. Free and MIT licensed, React and Framer Motion.

Get it free

Open the demoReact · Tailwind · TypeScript

Use it in Next.js

"use client";
import { Toaster, toast } from "@/components/toast-stack/ToastStack";

export default function Page() {
  return (
    <>
      <Toaster visibleToasts={3} duration={5000} />
      <button onClick={() => toast.success("Saved", { description: "Your changes are live." })}>Save</button>
      <button onClick={() => toast.error("Upload failed", { action: { label: "Retry", onClick: retryUpload } })}>Upload</button>
    </>
  );
}

Good to know

  • The stacked toast notifications page below covers install and props, and the server action page shows toast.promise.
  • Each toast is a motion.li inside AnimatePresence. A new toast rises from below on a spring with stiffness 420, damping 27 and mass 0.9.
  • Collapsed, each card behind the front one sits 16 px higher, 5.5% smaller and a little dimmer. Cards past visibleToasts fade out.
  • Hover or focus fans the deck out. Each card's spring starts 35 ms after the one in front of it, so they spread one by one.
  • Swiping uses plain pointer events, not Framer Motion's drag. While you drag, the card follows the pointer, tilts and fades. Let go past 100 px, or fast enough, and it flies off over 0.42 s. Otherwise it springs back.
  • The sparks on a success toast use the browser's Web Animations API, not Framer Motion.
  • With Reduce Motion on, toasts only fade, over 0.2 s.
  • Escape, Delete or Backspace closes the focused toast, and Alt+T jumps to the newest one.

Install

  1. One commandnpx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/toast-stack.json
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

visibleToasts
cards in the collapsed deck
duration
auto-dismiss in ms, paused while fanned out
gap
space between cards when fanned out
strategy
fixed or absolute

How qodesign compares

All 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: Framer Motion vs CSS Animation for Micro-Interactions

Questions

Which framer-motion version does it install?

The registry installs framer-motion 11.18.2.

Can I use motion/react instead?

Yes. In our test on Oct 21, 2026 (Next.js 16.4.2, React 19.3.1) Toast Stack built and ran with the motion package 12.43.0 and the motion/react import, with no console errors.

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.