shadcn.io is not affiliated with official shadcn/ui
Mobile App Download Onboarding Block for Radix UI
A habit tracker's get-the-app dialog shown open over a drawn week: iPhone and Android tabs, each with its own QR code, a requirements line and a text link, plus a Text me a link phone field that checks the number.
Installation
Overview
Move people from the web to your app with this get-the-app dialog for React with Radix UI. It opens from Pocketholm, a habit tracker: the header holds an outline Get the app button and the screen under it is a drawn week of habits, dimmed by a soft scrim. The Dialog has two Tabs, iPhone and Android; each holds a real QR Code of an example link, one line on what the phone needs and a plain text link (“Open on iPhone”, “Open on Android”: words, no store badges). Under the tabs a phone field offers to text the link and checks the number. Text me the link is the one Shine Button; Skip closes the dialog.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the week: a native dialog element that isn't modal, so nothing is trapped or focused. Get the app opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same AppFields, with the same typed number and tab. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element.
What do the QR codes point at?
At the example links in PHONES (pocketholm.example), so scanning one leads nowhere. In your app point each at your store listing, or at one link that sends each phone to its own store. The first tab is iPhone and is fixed: the block doesn't sniff the browser.
Does Text me the link send a text?
No. It checks that the number has 7 to 15 digits, then says what it would do in the line under the field, which also holds the hint and any problem so nothing moves. In your app call your texting service in text, send one message to a number you verified, and rate-limit it.
What do Skip and the close button do?
Both close the dialog, clear the number and put focus back on Get the app, which stays in the header so the choice isn't lost. In your app remember that the dialog was shown so it doesn't open on every visit.
Is it accessible from the keyboard and a screen reader?
Yes. The tabs are named “Your phone” and move with the arrow keys, each code has a text alternative that names the phone it opens, and the field has a label and a description. The page and the open dialog each have a polite status line, so a result is spoken wherever focus is.