Glass ToastFrosted glassmorphism toast notification stack with 4 variants, auto-dismiss progress bar, and spring-animated stacking.

Add to your project

One command adds this component to your project.

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

About Glass Toast

Glass Toast is a frosted-glass toast notification system with four variants (success, info, warning, error), an auto-dismiss progress bar inside the card itself, and spring-animated stacking when multiple toasts queue up. Motion handles both the entrance/exit timing and the stack reflow when one disappears. It is the canonical toast component for SaaS dashboards, mobile apps, and any product that needs short-lived, low-friction feedback after an action.

Built with

Frequently asked questions

Is Glass Toast free to use?

Yes. Glass Toast is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Glass Toast?

One command: npx shadcn@latest add https://aicanvas.me/r/glass-toast.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Toast for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Glass Toast built with?

Glass Toast is built with React and TypeScript, using Motion and Tailwind CSS.

Where would I use Glass Toast?

Common uses include SaaS, Dashboard, and Mobile app. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Glass Toast with AI?

Yes. Glass Toast ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.

Featured in collections