Appearance Settings
Settings
Source and install need .
pnpm dlx shadcn@latest add @assembli/referral-programReferral Program
A "Refer & earn" settings section: three steps explain the reward, the invite link copies with a confirmation or shares by email, X or LinkedIn, and an email field turns pasted lists into chips that flag bad addresses. A milestone meter tracks subscribed friends toward reward tiers, earned credit sits in the header, and referrals list their status with a resend for pending invites.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
link*
string
The member's personal invite link.
referrals
Referral[]
defaultReferrals
Referral[]
Default
[]onReferralsChange
(referrals: Referral[]) => void
give
number
Default
20What a friend gets off their first bill.
get
number
Default
20What the member earns once a friend subscribes.
currency
string
Default
"USD"credit
number
Credit already earned. Defaults to
get× subscribed referrals.tiers
ReferralTier[]
Default
DEFAULT_REFERRAL_TIERSnow
string | number | Date
The current time, for "2 days ago". Pass it so server and browser agree.
onInvite
(emails: string[]) => Promise<unknown> | void
Send invites. Reject to keep the addresses in the field and show the error.
onResend
(referral: Referral) => Promise<unknown> | void
product
string
Default
"Northwind"Product name used in share copy.
title
React.ReactNode
Default
"Refer & earn"description
React.ReactNode
| Description | |||
|---|---|---|---|
| link* | string | – | The member's personal invite link. |
| referrals | Referral[] | – | |
| defaultReferrals | Referral[] | [] | |
| onReferralsChange | (referrals: Referral[]) => void | – | |
| give | number | 20 | What a friend gets off their first bill. |
| get | number | 20 | What the member earns once a friend subscribes. |
| currency | string | "USD" | |
| credit | number | – | Credit already earned. Defaults to |
| tiers | ReferralTier[] | DEFAULT_REFERRAL_TIERS | |
| now | string | number | Date | – | The current time, for "2 days ago". Pass it so server and browser agree. |
| onInvite | (emails: string[]) => Promise<unknown> | void | – | Send invites. Reject to keep the addresses in the field and show the error. |
| onResend | (referral: Referral) => Promise<unknown> | void | – | |
| product | string | "Northwind" | Product name used in share copy. |
| title | React.ReactNode | "Refer & earn" | |
| description | React.ReactNode | – |
