shadcn.io is not affiliated with official shadcn/ui
Referral Rewards Pricing Block for React Aria
Referral pricing as a copyable invite link over a three-step reward track: friends invited and joined (2 of 3), the free months each step pays (1 month, 3 months, a year) and what's already earned.
Installation
Overview
Turn customers into a sales channel with this referral rewards section. A compact header says what a friend gets and shows three account numbers beside it (friends invited, friends joined and the free time earned so far). One ruled band on the page's rails, drawn by Guides, holds the whole offer. Its first row is the visitor's invite link in a read-only field from Clipboard beside a Shine Button that copies it, the block's one primary control, which swaps its icon and label to say it worked. Under it is the reward track: three steps (1 friend for a free month, 2 friends for 3 months, 3 friends for a year), each drawn with a rule that is filled when the step is earned, its reward in display-size type, what it takes and what it's worth on the Personal plan. The next step says how many more friends it needs, and later ones are locked. On a phone the track stacks as a vertical rail. Built with Clipboard, Shine Button, Guides and Lucide icons, with CSS transitions only. For referral programs, invite-a-friend pricing and any plan that rewards sharing.
FAQ
How do I change the rewards and the progress?
Edit the constants at the top of the file. REWARDS lists the steps, each with the friends who must join and the free months it pays; INVITED and JOINED are the visitor's counts, and everything else follows: which steps are earned, which is next, how many friends it needs and the "free so far" figure. PERSONAL_PRICE and FAMILY_PRICE are the prices in the sentence beside the link and the value under each reward. In your app, pass the real counts and link in as props or from your data.
How do I use a real invite link?
Set INVITE_URL to the visitor's own link, generated on your server and stored with their account. The field shows it and the button copies exactly that text. Count a referral only when the friend has signed up and verified their email, and add the reward to the referrer's next bill on your server: the page shows the state, it doesn't decide it.
What happens if the browser blocks copying?
The button's icon and label change to a cross and "Couldn't copy" for three seconds, and a polite status line says so, with an instruction to select the link and copy it. Clipboard access needs a page served over HTTPS and a click; without it the field still shows the link, which is selectable, so the visitor can copy it by hand. When it works, the label says "Copied" and the status announces "Invite link copied."
Is the reward track accessible?
Yes. The steps are an ordered list named "Rewards", and each one says in words where it stands ("Earned", "1 more friend to go" or "Locked"), so the filled rules are never the only signal. The summary line reads "2 of 3 friends joined", the field is named "Your invite link", and the copy button's result is announced. The icons are decorative and hidden.
How does it look on a phone?
The link field and the copy button stack, and the button fills the width. The reward steps become a vertical rail: each step has a rule down its start edge, filled when earned, with its reward under a status line. The three header numbers are hidden on phones, since the track already shows what's earned. The copy button lands within the first screen of an iPhone. In right-to-left pages the rails and the track mirror, and the link and the prices stay left to right.
Why a reward ladder instead of one reward per friend?
A ladder gives the visitor a next step to aim at: one more friend and the reward triples. It also puts a cap on cost, since a year is the most one account can earn. Keep the first step small enough to feel reachable (one friend, one month) and make the last one worth bragging about.