React Waitlist
Being told "you're on the list" converts poorly. Being told "you're #1,284, and each referral moves you up 10" converts, because it turns a dead end into a game with a visible state.
Early access to the KLV-9000
Next-generation post-quantum accelerator. We're onboarding design partners in batches, starting with automotive and grid.
1,283already waiting
One email when your access opens. Nothing else.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| title | string | Heading |
| description | string | Supporting line |
| existingCount | number | Social proof, and the basis of position |
| boostPerReferral | number | Places gained per referral |
| referralBase | string | Base URL for the generated link |
| onSubmit | (email: string) => void | Fires on join |
The referral code is derived, not random
The code comes from a djb2 hash of the email, not Math.random() or a timestamp. Two consequences, both deliberate: the same email always produces the same link, so someone who re-joins gets their existing code rather than orphaning their referrals; and nothing differs between a server render and the browser, so there is no hydration mismatch.
In production, issue the real code server-side and pass it in — the client hash is a stand-in that keeps the demo deterministic. Likewise, resolve the true position from your backend rather than trusting existingCount + 1; two people joining in the same second must not both be told they are #1,284.
The confirmation uses the deep surface with the electric accent for the position number — the one place that colour is permitted, and it earns it here, because the number is the entire reason the screen exists.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.