## Referral Progress (S—238)

A referral card: copy your invite link, see friends who joined on a milestone track, and what the next reward unlocks.

- URL: https://sundaeui.dev/components/referral-progress
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/referral-progress.json`
- Tags: rewards, share, invite, growth, milestones, referral

The link copies with one tap. Milestones sit on a track (1 friend, 3 friends, 5 friends) and fill as invites convert, each with its reward.
Pending invites show as hollow, joined as filled. The next reward is spelled out with how many more friends it needs.

### Usage

```tsx
import { ReferralProgress } from '@/components/sundae/referral-progress'

<ReferralProgress />
```

### Props

- `link` (`string`, required): Invite URL.
- `friends` (`{ name: string; joined: boolean }[]`): Invites.
- `tiers` (`{ at: number; reward: string }[]`): Milestones.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Growth loops, account pages, post-purchase screens.

### When not to use

- When rewards depend on rules you can’t show plainly.

### Accessibility

- The track is a progressbar with the count of joined friends.
- Copy confirms with a status message.
- Reduced motion removes the movement and keeps every state change.