ESC To Close Overlay
Add accessibility and power to your Framer overlays by having the ability to let your users close the overlay by pressing the Esc button. Easy to use, free & open source.
Make it with Workshop
Build your own component with AI
Add accessibility and power to your Framer overlays by having the ability to let your users close the overlay by pressing the Esc button. Easy to use, free & open source.
Make it with Workshop
Build your own component with AI
Make your overlays feel more natural, accessible, and intuitive.This component adds native ESC key support to Framer overlays, allowing users to instantly close them with a single keypress, just like they would in any real product experience.
In this video, I’ll walk you through how the component works, how to set it up, and why it’s such a valuable addition to your Framer projects.
Framer’s built-in overlays are beautiful and flexible, but they currently rely on manual close overlay triggers to close your overlays. With this component, that limitation is gone. Simply drop it inside your overlay, and it will automatically handle the ESC key event to close the overlay smoothly and natively. Read below to see the simple setup.
Drag and drop the component inside your overlay frame.
Set its position to absolute and move it offscreen for example, set the right and bottom (or top and left) positions to -1.This keeps it invisible to the user while still active inside the overlay.
Go to the Interactions panel and assign the Close Overlay action. It will automatically bind to the component’s custom onEscape event.
For extra safety, you can set:
pointer-events: none
user-select: noneThis ensures it won’t interfere with any visual or interactive elements.
Once added, the component quietly runs in the background, waiting for users to press ESC. When they do, the overlay closes instantly and smoothly, just like any polished web app or product interface.
Improved UX:Gives users the seamless, keyboard-friendly experience they already expect from modern web apps.
Accessibility Upgrade:Makes your overlay interactions more inclusive and usable for keyboard navigation or accessibility-focused workflows.
Faster Interaction Flow:No need to move the cursor to find the close button one quick keypress and the overlay is gone.
Plug-and-Play Simplicity:Drop it in once and attach the close overlay interaction, that's it!
Polished Product Feel:Small detail, big impact. Adds that extra layer of realism that makes your Framer projects feel production-ready.
