---
title: "ESC To Close Overlay — Free Framer component · Best of Framer"
description: "Free Framer component · by Krutik Maru · Interactive. Make your overlays feel more natural, accessible, and intuitive."
canonical: "https://framer.elliotli.dev/component/esc-to-close-overlay"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/ESC To Close Overlay

# ESC To Close Overlay

[View on Framer](https://framer.com/marketplace/components/esc-to-close-overlay/?via=elliot-li)

![ESC To Close Overlay preview image 1](https://framer.elliotli.dev/og/component/esc-to-close-overlay/4b1b0c45f72adf58/1600x1200.jpg)

## Summary

Make your overlays feel more natural, accessible, and intuitive.

## Description

**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.

## Watch the Tutorial

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.

Close Framer Overlays Using Esc Key

## About the Component

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.

## Setup

1.  **Drag and drop** the component inside your overlay frame.
    
2.  **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.
    
3.  **Go to the Interactions panel** and assign the **Close Overlay** action. It will automatically bind to the component’s custom **onEscape** event.
    
4.  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.

## Why You Should Use This Component

-   **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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7036

## Details

- **Author**: Krutik Maru
- **Published**: 2025-11-19
- **Updated**: 2025-11-18
- **Added**: 2025-11-08
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase