A waitlist form with a live priority meter: every optional answer moves your estimated spot forward and up through access tiers. Joining reveals a referral link with copy feedback.
npx shadcn@latest add https://hyperblur.dev/r/form-waitlist.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/form-waitlist.tsx.
import { FormWaitlist } from "@/components/hyperblur/form-waitlist"
<FormWaitlist product="Orbit" onSubmit={(values, position) => console.log(position)} />| Prop | Type | Default | Description |
|---|---|---|---|
| product | string | "Orbit" | Product name used in the success message. |
| title | string | "Join the beta" | Label above the position counter. |
| queueLength | number | 6240 | People currently in line. |
| useCases | string[] | 4 use cases | Options for 'What will you build?'. |
| sources | string[] | 5 sources | Options for 'Heard from'. |
| referralBase | string | "orbit.so/r/" | Base of the referral link. |
| accent | string | "#a3e635" | Accent color for focus rings, selected states and the primary button. |
| delay | number | 1100 | Minimum time in milliseconds the loading state stays visible, so the transition never flickers. |
| onSubmit | (values: FormWaitlistValues, position: number) => void | Promise<void> | Called with the answers and the estimated position. |