Glass NotificationsSwipe-to-dismiss notification stack with glass cards and spring-animated layout transitions.
.png)
New Message
Alex sent you a photo
New Like
Sarah liked your post
Security
New login from MacBook Pro
Update Available
Version 4.2 is ready to install
Reminder
Team standup in 15 minutes
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/glass-notificationFor dark mode, add the dark class to your <html> element:
<html class="dark">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 Notifications
Glass Notifications is a vertical stack of swipe-to-dismiss notification cards with glassmorphism surfaces and spring-animated layout transitions, so removing one card lets the others reflow rather than jumping. Motion handles both the swipe physics and the layout choreography, and the glass surface adapts to whatever the user has scrolling behind it. It works well for SaaS notification trays, mobile-style alert centres, and dashboard activity feeds where individual items should feel tactile.
Built with
Frequently asked questions
- Is Glass Notifications free to use?
- Yes. Glass Notifications 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 Notifications?
- One command: npx shadcn@latest add https://aicanvas.me/r/glass-notification.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Notifications 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 Notifications built with?
- Glass Notifications is built with React and TypeScript, using Motion and Tailwind CSS.
- Where would I use Glass Notifications?
- 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 Notifications with AI?
- Yes. Glass Notifications ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas