shadcn.io is not affiliated with official shadcn/ui
QR Install Footer Block for React Aria
A bike-share footer with a framed QR code for the install page, store links and two columns of ride links.
Installation
Overview
An install footer for React with React Aria, for Pedalhurst, a bike-share app. An even split: the start half is the wordmark, one sentence and a framed QR code that encodes the install page, captioned Scan to install. The end half leads with the store links, a Shine Button for iOS and an outline Button for Android, then two link columns in a nav labelled Footer. The divider runs from the top rule to the end of the page, and the legal band continues it. The code tile stays light so a camera can read it; the rest of the footer follows the theme. It's built from QR Code, Shine Button, Button and Guides.
FAQ
What does the QR code open?
It encodes APP_URL (https://pedalhurst.example/install in the demo). Replace that string with your install page and the code changes with it. The store buttons are separate links; they do not use the code's address.
Why does the code stay light in a dark theme?
A camera reads a dark code on a light tile. The QR frame is drawn that way, and this block does not paint over it. The wordmark, the type and the rules follow your theme. Nothing sets a dark scope on the footer.
Where do the store buttons go?
They are links with href="#". Point "Download for iOS" and "Download for Android" at the stores, or at the same install page as the code.
Each button takes an href and renders a link.
How do I change the links?
Edit GROUPS (Ride and Help) and LEGAL. Every column link is a plain anchor with href="#". The code's address is APP_URL, separate from those links. The frame's accessible name is "QR code for the Pedalhurst install page"; change it if the product name changes.
How does it fit on a phone?
The wordmark, the sentence and the code come first, then a rule, then the two store buttons (they wrap if they need to), then the two link columns, then the legal row. From lg the code sits beside the stores and the columns, and the divider runs through the legal band. Nothing scrolls sideways at 320 pixels.