---
title: "QR Code Reveal — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Nostromo Studio · Interactive. QR Code Reveal keeps a QR code out of the way until someone actually wants it."
canonical: "https://framer.elliotli.dev/component/qr-code-reveal"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/QR Code Reveal

# QR Code Reveal

Panel that reveals a real QR code

[View on Framer](https://framer.com/marketplace/components/qr-code-reveal/?via=elliot-li)

![QR Code Reveal preview image 1](https://framer.elliotli.dev/og/component/qr-code-reveal/481522303b91092b/1600x1200.jpg)

## Summary

QR Code Reveal keeps a QR code out of the way until someone actually wants it.

## Description

**QR Code Reveal** keeps a QR code out of the way until someone actually wants it. A small icon sits quietly in your design, and clicking it slides open a real, scannable QR code generated live from any URL.

The icon itself is decorative — a QR-style glyph, a scan icon, a custom image, or even a live QR code shown small — so nothing looks cluttered until the panel opens.

## Key Features

### Icon

-   Four icon styles: QR Icon, Scan Icon, Custom Image, or a live QR code
    
-   Size, padding, radius, background and border, each with an optional hover state
    
-   Optional clickable label text beside the icon, sharing the icon's hover state
    

### Panel

-   Opens from the left or right as a full-height slide-in panel with a dimmed overlay
    
-   Editable title, description, and caption text
    
-   Real, scannable QR code generated live from the URL, with adjustable size and color
    
-   Panel width, padding, background, font color, and overlay color
    
-   Caption card border and radius, wrapping automatically under the QR code on narrow panels
    
-   Closes on the X button, an overlay click, or the Escape key
    

### Design Preview

Canvas-only "Preview Panel" toggle to style the open panel directly on the canvas without clicking — never affects the live site.

## Usage Notes

QR Code Reveal auto-sizes to its icon and optional label — use the Icon "Size" control to resize the icon itself rather than dragging the frame. The QR code is generated with no external dependencies, so it keeps working even where third-party scripts are blocked.

## How to Set Up

1.  Drag QR Code Reveal onto your canvas
    
2.  Set the URL you want the QR code to open
    
3.  Choose an icon style and adjust its colors, padding and hover state
    
4.  Publish
    

## Refund Policy

All sales of digital products are final and non-refundable. Questions? Contact [hellonostromostudio@gmail.com](mailto:hellonostromostudio@gmail.com) before purchasing. Enjoy!

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

-   All · #9095

## Details

- **Author**: Nostromo Studio
- **Price**: $5.00
- **Published**: 2026-07-08
- **Updated**: 2026-07-10
- **Added**: 2026-07-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