Waitlist Join
An email input with live social proof that morphs into a personal confirmation card on submit. At rest it is a single dark capsule: email input on the left, social proof in the middle (four overlapping user avatars with names, and a rolling counter: '1,284 joined'), and a primary button on the right ('Join waitlist'). On submit, the entire pill morphs into a compact confirmation card showing the user's waitlist position ('#1,285'), the avatars, an invite link to copy, and a quiet thank-you. It never feels like a form; it feels like joining something.
Dependencies
Interaction
Shared-layout pill-to-card container morph with ease-out position odometer, staggered avatar entrance, SVG spinner feedback, and accessible keyboard focus hand-off.
Props
| Prop | Type | Description |
|---|---|---|
| onSubmit | (email: string) => Promise<{ position: number } | void> | { position: number } | void | Submit handler called with the entered email. Can return a custom position. Your app handles the email. This component sends nothing. |
| count | number | Number of people currently on the waitlist. |
| avatars | { name: string; src?: string }[] | Recent members shown in the social proof stack (up to 4). |
| inviteUrl | string | Personal invite link shown in the success confirmation view. |
| placeholder | string | Email input placeholder text. |
| buttonLabel | string | Text label for the submit button. |
| className | string | Additional CSS class names for the container. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.