Offer Modal 14 block design & features
A shadcn/ui referral modal split into a photo of two friends on one side and the offer on the other. A large Give 20%, get 20% heading and a short line explaining both rewards sit above a read only field holding the shopper's personal link with a Copy button beside it. Below that is an invite by email field with a Send button, a Share via row with Text, WhatsApp and More buttons, and a one line terms note.
Copy writes the full link to the clipboard and swaps to a check and Copied for two seconds, with a polite live announcement for screen readers. Sending an invite validates the address, clears the field and shows an Invite sent confirmation that fades out after a moment. More opens the device share sheet where available and falls back to copying the link, and the dialog opens without a focus ring on any control.
The layout stays light and editorial, with hairline borders, plain theme colours and no gamified extras. The heading, description, referral link, share message, photo and terms are props, and the modal opens by default in the preview. On small screens the photo becomes a wide banner above the form.