shadcn.io is not affiliated with official shadcn/ui
Referral Invite Sheet Block for Vue
A meal-kit box page with its referral sheet shown open from the end edge: a code and a link that really copy, a friend's email and the message that would go with it, a reward ladder marked Reached or how many friends to go, and three figures.
Installation
Overview
Let a customer invite a friend with a code, and see what it earns them, with this referral sheet for Vue with Ark UI. It opens from the box page of Fennelcrate, a meal-kit subscription: the page's header holds an outline Give $10, get $10 Button, and the page, a bar with the credit as text, three meals drawn as plates and a delivery line, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Sheet comes in from the end edge and holds your code in large mono and your link, each with a Copy button that really copies, a friend's email Input and the message that goes with it, with the code inside and the To line filled from the address. Nothing opens and nothing is sent: Write the email, the only Shine Button, adds one to the invited count and shows the message for you to copy and send yourself. Under it a reward ladder marks each step Reached or how many friends to go, and three figures count invited, joined and credit. For preview the sheet is drawn open in place when the page loads; the header button opens the real sheet, with the same state. For subscriptions, shops, apps and any business that grows by referral.
FAQ
Why is the sheet already open, and what do I keep?
So you can see it without a click. On load the sheet 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 header button opens the real Sheet, modal, with its focus trap, Escape and focus return, from the end edge in either reading direction, and the copy stays closed until a reload. Both show the same ReferralFields component and share the block's state. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
Why does Write the email not open a mail app?
Because the page cannot know that one is set up, and a link that opens nothing is worse than none. So the sheet writes the message itself: the To line comes from the address you typed, the subject and the body carry your code and your link, and Copy message puts all of it on your clipboard to paste into whatever you use. The invited count goes up by one, on the sheet and on the drawn page, and says it was only written in this demo. In your app send the invite from your server, with your own mail provider, to an address the friend gave you permission to use.
Do the Copy buttons really copy?
Yes. The browser's clipboard is real, so Copy code, Copy link and Copy message each put their text on it, the button reads Copied for three seconds and the status line says which. If the browser refuses, an alert says so and asks you to select the text and copy it by hand. The code and the link are typed in the file and point nowhere.
How is the ladder worked out?
From two typed numbers: how many friends have joined (2) and what each step needs (1, 2 and 4 friends). A step with enough friends is filled with a check and says Reached; the others say how many friends to go. The credit is joined friends times $10, so $20, and the figures and the drawn page read the same numbers. In your app read the friends and the credit from your API after each order.
Is it accessible from the keyboard?
Yes. The real sheet is named by its title and described by its sentence, focus starts on Copy code, and Escape and the close button return focus to the header button. Every button is named by what it copies, a wrong address is checked when you leave the field and again on Write the email and is named in words under it, and what changes is spoken once in a polite status line (inside the sheet while it is open). The trigger is the button wrapped in SheetTrigger with asChild, and the sheet is controlled with open and onOpenChange.
How does it look on a phone?
The copy shown on load docks to the foot of the page as a bottom sheet with its button pinned and the content scrolling above it: the code and link first, then the email, the message, the ladder and the figures. The real sheet is full width on a phone, with the same order.