Download App Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Get the app button 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 InstallFields component and share the block's state, so a number typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

It is a real QR code, drawn by the catalog component from the address in LINK, so a phone pointed at the screen reads it. The address is a placeholder; point it at a page that detects the phone and forwards to the right store, so one code serves both. The code sits in a light tile with a ring so it stays readable in a dark theme.

No. App Store and Google Play are links to # whose handlers say in a polite message that they go nowhere in this demo. Their tiles are two typed letters, not logos. In your app link to your store pages and follow each store's badge and trademark rules if you use their official artwork, which is up to you.

Text me the link checks that the number has 7 to 15 digits, then says "A text with the link would go to ..." and nothing is sent; a number that doesn't pass shows its problem under the field and keeps focus there. In your app post the number to your server in text, have the server send one message with the link and rate-limit it, and keep the message's wording in the dialog's hint so people know what they agreed to.

Yes. The two tabs are a tab list you move through with the arrow keys, the steps are numbered lists named for the phone, the store links are real links, and the field is named by its label. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Close and its close button close it and put focus on Get the app. One polite message reports what a press did.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Text me the link on top. The code is hidden and the two store buttons come first, then the install steps and the phone field, all scrolling above the actions. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.