shadcn.io is not affiliated with official shadcn/ui
Referral Rewards Pricing Block for React
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.
Related
- %%%Pro
Partner Program Pricing
Sales and partnersA three-tier partner program where the commission is the hero: each tier is a ruled row led by its percentage (10%, 20%, 30%) at display size, with its discounted seat price and perks, beside the pitch.
- Pro
Pay-What-You-Can Nonprofit Pricing
Discounts and offersA sliding scale for nonprofits: a price slider from free to the list price, the chosen price riding its thumb, shortcuts to the minimum, suggested and supporter prices, and a line on what that price funds.
- Pro
Early Bird Pricing
Discounts and offersFounder seats that run out: '163 of 200 claimed' at display size over a bar of forty segments, with the one founder plan, its struck regular price and its lifetime price beside the features.
- Pro
Countdown Offer Pricing
Discounts and offersA launch price on a clock: a live countdown in days, hours, minutes and seconds at display size beside the headline, over three plans for a music app, one of them discounted. A Segment Group shows one plan at a time on a phone.
- Pro
Credit Packs Pricing
Usage and creditsOne-time credit packs where the amounts lead: 500, 2,000, 10,000 and 50,000 credits at display size over growing coin stacks, each pack cheaper per credit, rows with a buy button on phones.
- Pro
Startup Credits Pricing
Discounts and offersStartup credits with the amount as the hero: $25,000 at display size, three facts, three eligibility statements the visitor ticks and an apply button that turns on only when all are true.