A referral waitlist with a name and email form, reward tiers and a live leaderboard of top referrers with animated bars. After joining, your spot counts up, a referral link appears with a copy button and you join the board.
Every friend who joins with your link moves you up five spots. The top fifty referrers get in on day one.
npx shadcn@latest add https://hyperblur.dev/r/waitlist-referral-board.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/waitlist-referral-board.tsx.
import { WaitlistReferralBoard } from "@/components/hyperblur/waitlist-referral-board"
<WaitlistReferralBoard onJoin={(values) => console.log(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Relay early access" | Small label above the title. |
| title | string | "Invite friends, jump the line" | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| totalSignups | number | 8412 | People already in line. The new spot is this plus one. |
| referrers | { name: string; handle: string; referrals: number; hue: number }[] | 6 referrers | Leaderboard rows, highest first. |
| rewards | { friends: number; label: string }[] | 3 tiers | Reward tiers under the form. |
| referralBase | string | "https://relay.so/r/" | Prefix of the referral link. A short code derived from the email is appended. |
| onJoin | (values: { name: string; email: string }) => void | Promise<void> | Called with the form values after validation. Nothing is posted by the component. | |
| onReferralCopy | (url: string) => void | Called when the referral link is copied. | |
| accent | string | "#2f7bff" | Button, bar and highlight color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |