Referral Widget React component
A refer-a-friend card: give-and-get explainer, your link with a Copy button that flips to Copied, quick share links, email invites, how much you have earned, a milestone track that unlocks bonuses with confetti, and your friends' progress from invited to subscribed with reminders.
About the Referral Widget component
Referral Widget turns a refer-a-friend program into one friendly card. The left side explains the deal in a sentence and gives people every way to share: copy their link, send it by email or message, or type friends' emails straight into the card.
The right side shows what sharing has earned so far, a track of bonuses that unlock as more friends subscribe, and each friend's progress from invited to signed up to subscribed. Reaching a bonus throws confetti, and friends who stalled can get a reminder.
When to use it
Use it in account or billing settings, a dashboard sidebar, a post-purchase thank-you page or a dedicated referrals page.
Keep the reward simple and symmetrical; 'give $20, get $20' beats a table of tiers.
Installation
Add the Referral Widget component to your project with the shadcn CLI. It lands in components/referral-widget.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/referral-widgetOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ReferralWidget /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| link | string | "https://nexora.app/r/mara-7Q2X" |
| reward Credit each side gets when a friend subscribes. | number | 20 |
| currency | string | "$" |
| referrals | { id: string; email: string; name?: string; status: ReferralStatus; when: string }[] | — |
| milestones Subscribed-friend counts that unlock bonuses. | { at: number; label: string }[] | DEFAULT_MILESTONES |
| onInvite | (emails: string[]) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- linkstringDefault: "https://nexora.app/r/mara-7Q2X"
- reward
Credit each side gets when a friend subscribes.
numberDefault: 20 - currencystringDefault: "$"
- referrals{ id: string; email: string; name?: string; status: ReferralStatus; when: string }[]
- milestones
Subscribed-friend counts that unlock bonuses.
{ at: number; label: string }[]Default: DEFAULT_MILESTONES - onInvite(emails: string[]) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Referral Widget FAQ
- How is 'You have earned' worked out?
- It is the number of subscribed friends times the reward. Pass referrals from your backend and the total, milestones and next bonus update on their own.
- Are there real share buttons for social networks?
- The block uses plain links: mailto for email, sms for messages and an intent URL for posting, with generic icons and no third-party logos or scripts.
- What do the Remind buttons do?
- In the demo they show 'Sent' and then move the friend one step forward so you can see statuses change. In your app, send a reminder email and update the status from your data instead.
- Can I change the bonuses?
- Yes. Pass milestones with the number of subscribed friends needed and a label. The track spaces them by their numbers and checks them off as you reach them.
- Is it accessible?
- The link and email fields have labels, invite errors use aria-invalid and role alert, the copy result and earnings are announced, the milestone track is a progressbar and each friend's status has a text label.
