A referral waitlist where rewards are rungs on a vertical ladder and a marker climbs the rail as friends join. After signing up you get your place, a copyable link and an email chip field to send invites.
Join the Tallyhall waitlist, share your link, and every friend who signs up moves you up a rung. Rewards unlock the moment they join.
tallyhall.app/r/younpx shadcn@latest add https://hyperblur.dev/r/waitlist-referral-ladder.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/waitlist-referral-ladder.tsx.
import { WaitlistReferralLadder } from "@/components/hyperblur/waitlist-referral-ladder"
<WaitlistReferralLadder onInvite={(emails) => console.log(emails)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Early access" | Small label above the title. |
| title | string | "Bring friends, climb the ladder" | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| rungs | { at: number; title: string; detail: string }[] | 5 rungs | Rewards, from the bottom. at is the number of friends needed. |
| basePosition | number | 4318 | Place in line before referrals. |
| spotsPerReferral | number | 250 | Places skipped per friend who joins. |
| referrals | number | Controlled count of friends who joined. | |
| defaultReferrals | number | 0 | Initial count when uncontrolled. |
| defaultJoined | boolean | false | Starts in the joined state. |
| referralBase | string | "tallyhall.app/r/" | Prefix of the referral link. |
| simulateJoins | boolean | false | Marks invited friends as joined after a delay, for demos. |
| onJoin | (email: string) => void | Promise<void> | Called when the visitor joins. | |
| onInvite | (emails: string[]) => void | Called with the emails when invites are sent. | |
| onLinkCopy | (link: string) => void | Called after the referral link is copied. | |
| accent | string | "#a3e635" | Rail, reached rungs and button color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |