shadcn.io is not affiliated with official shadcn/ui
Referral Program Storefront Block for React Aria
A refer-a-friend page for a candle maker: a three-step milestone ladder, an invite list that refuses bad or repeated emails, a copyable invite link, and a Draft invites button that says nothing is sent.
Installation
Overview
Turn happy customers into invites, with this referral page for React with React Aria. A header names the page and says what Peatfire is. A hairline frame with a plus mark on each corner holds a ladder of three milestones (one friend for a $10 credit, three for $35, five for a free tote) whose state is worked out from the friends who have joined, each cell saying Reached or how many friends to go; an invite band with an email Field and an Add button that refuses a malformed or repeated address with the reason, the addresses as removable chips and a line that says where the ladder would stand if every invited friend joined; and a typed invite link with a Copy Button. The Shine Button drafts the invites and the status line says that nothing is sent. It's built from Field, Input, Copy Button and Guides, with a CSS entrance only. For a refer-a-friend page, an affiliate sign-up or a post-purchase share.
FAQ
How do I change the milestones?
Edit MILESTONES (friends needed and the reward, in ascending order) and JOINED, the friends who have already joined. Each cell's state, the friends still needed and the "if all joined" line are derived from them.
Which addresses are refused?
One that does not look like an address, one already in the draft, and one past the limit of six. Each shows its reason in the field's reserved line, and an empty field says to type an address first.
What does Draft invites do?
It needs at least one address, then says "Drafted for N people in this demo, nothing is sent." It does not open a mail client or call a server.
What stays local, and how do I wire it to real invites?
The joined count, the link and the draft are page state and sample data. To wire it, send the list from draft to your mailer or referral API, issue the link per customer and read the joined count from your referral records.