NotificationStack brings a professional, fully customizable alert system to your Framer projects. It’s designed to help you communicate with your users through sleek, stacked notifications that feel like a native part of your website. Whether it's a success message, a warning, or a quick update, this component handles the heavy lifting so you can focus on your design.
It manages an interactive list of notifications that can be positioned anywhere on your screen. The component automatically handles how many alerts show up at once and manages their lifecycle, including smooth entries and timed exits. It even supports manual reordering, giving your visitors a tactile, interactive experience as they interact with your site’s updates.
General Settings: Add as many notification items as you need and choose whether users can drag to reorder them.
Look and Feel: Switch between classic Light and Dark modes, or go fully Custom to match your brand. You can also pick specific fonts for both titles and body text to keep your typography consistent.
Placement and Timing: Pin the stack to different screen positions and decide if alerts should disappear on their own. You have precise control over the dismiss duration right down to the millisecond.
Motion and Animation: Choose between snappy Spring or smooth Tween transitions. If you go with Spring, you can fine tune the stiffness and damping sliders to get that perfect, bouncy feel.
SaaS dashboards and user activity feeds
E-commerce "Added to Cart" confirmations
Form submission feedback and error handling
In app notifications for web builders or tools
General site announcements and welcome messages
If you ship something cool with it, post it on X and tag me @Dulajweb or send it over. I’d love to see how you’ve styled the stack in your own projects!
Got questions or some feedback for me? Reach me anytime at dulajdilshan766@gmail.com or find me on X @Dulajweb
Dulaj dilshan
