# Referral 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.

- Slug: `referral-program`
- Category: [Settings](https://www.assembli.design/category/settings.md)
- Type: component
- Tags: referral, invite, rewards, settings, credits, share
- npm dependencies: lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/referral-program
- Page: https://www.assembli.design/components/referral-program

![Referral Program preview](https://www.assembli.design/thumbnails/referral-program-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `link` (required) | `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 `get` × subscribed referrals. |
| `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` |  |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/referral-program/referral-program.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/referral-program
```

Registry item JSON: https://www.assembli.design/r/referral-program.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.