Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: React Recently Viewed Products List
Next: React Gift Registry with Progress

React Referral Program with Earnings

React referral program with shareable link, earnings tracker, and referral history using Next.js, shadcn/ui, and Tailwind CSS

Turn customers into brand ambassadors with this referral block. Three numbered steps explain the program at a glance. A copyable referral link makes sharing effortless. Stats show referrals sent, completed, and total earnings. The history section lists each referral with status indicators and amounts. Uses Button, Input components. Perfect for affiliate programs, loyalty campaigns, viral growth.

React Referral Program with Earnings preview

Loading...
Scroll to load preview

Installation

Install
Pro block

Loyalty

Loyalty rewards program

Membership

Membership tier comparison

Personalized

Personalized recommendations

Order History

Past order list

Checkout

Checkout flow

Cart

Shopping cart view

FAQ

Last updated on March 28, 2026

Was this page helpful?

Sign in to leave feedback.

React Recently Viewed Products List

Recently viewed products with timestamps. React, Next.js, shadcn/ui Button, Tailwind CSS.

React Gift Registry with Progress

React gift and wedding registry with funding goal, item tracking, and shareable link using Next.js, shadcn/ui, and Tailwind CSS