Catalogue
Notifications stack like a deck of cards. Hover or focus the deck and it fans out into a list while the page behind it blurs. Swipe a toast sideways to throw it away. A promise toast shows a spinner, then turns into a lime check when the work finishes. Success, error, info and loading types, each with an optional action button such as Undo or Retry.
- Deck that fans out on hover or focus
- Swipe to dismiss
- Promise toasts: spinner to check
- Success, error, info and loading, with one action button
- Stack
- React + TypeScript, Tailwind CSS, Framer Motion
- Next.js
- App Router ready, "use client" included
- Also included
- A single HTML file version and PROMPT.md
- Licence
- MIT
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.