Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

QR Download Split Banner Block for Radix UI

A scan-to-install callout for a mobile app: a real QR code in a card in card with a caption, beside the heading, one sentence and links to both store listings.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A scan-to-install banner for React with Radix UI. Between the page's rails, a split on a solid divider that meets the top rule: at the start a real, scannable QR code (the Qr Code item, not a drawing) in a muted shell, with a one-line caption; at the end "Take Hazelboard with you", one sentence and two inline links, one to each store listing. The code stays black on a white tile with a quiet zone in every theme, the way a printed code is, so any camera reads it; the rest of the block follows your theme. The copy comes first in the page and the code moves to the start on wide screens. It's built from Qr Code and Guides. For app downloads, desktop pages with a mobile twin and any hand-off from a computer to a phone.

FAQ

Where does the code point, and how do I change it?

APP_URL at the top of the file. It points at an example address; use a page that sends iOS and Android visitors to the right store, so one code serves both, then keep the two inline links for people who prefer to search. The code is generated in the browser from that string, so there's no image to replace.

Why is the code's tile white in a dark theme?

Scanners expect dark modules on a light background, and many fail on inverted codes. The tile keeps the catalog's black-on-white and adds a quiet zone (12 px of white around the pattern) so it scans in every theme. The shell around it is a muted tint that follows your theme.

How is the code described to screen readers?

The frame is an image named "QR code that opens the Hazelboard download page", and the caption is a figcaption in a figure, so the link text next to it is the real way in for people who can't scan. Both listing links are plain, named links.

Can the code be larger?

Set [--qr-code-size:8rem] on the Qr Code to another size. 8 rem (128 px) scans comfortably from a phone held at arm's length and keeps the block under half a screen; below about 6 rem, scanning gets harder.

What happens in a right-to-left layout?

The code moves to the right edge and the text aligns to the start. The code itself is never mirrored.

How does it fit on a phone?

The heading and the sentence come first, then the code at a fixed 8 rem under a rule, since a phone can't scan its own screen: its listing links are the quicker way, and they come first. At 320 pixels nothing scrolls sideways.

All 100 banner blocks