Best for
Founders who want to capture emails before launch day using a single-focus conversion page with no distractions.
Stack
A ready-made Product Launch Waitlist UI you can fork, run, and customize with the prompt pack below.
What's actually inside
The honest engineer's breakdown — what the Product Launch Waitlisttemplate does, how it's wired, and where it's opinionated.
This template is deliberately minimalist — everything exists to drive one action: email signup. The Hero Section dominates the viewport with the product name, a single-line value proposition, and an inline shadcn Input + Button form. Below the form you get a 'X people already waiting' social proof counter badge (static by default, animatable via Framer Motion) and a blurred or teaser image of the upcoming product UI to build intrigue. The minimal Footer has only legal links and an unsubscribe notice — there are no nav links, no secondary pages, no distractions.
The template handles the post-submit experience through a Success State component that replaces the form inline after a confirmed submission — no page reload, no redirect. This pattern requires proper React state management: the Success State visibility is controlled by a local state variable updated by the Server Action response. If you wire a Sonner toast instead of swapping the component, make sure both fire together.
One honest caveat: the social proof counter is hardcoded to a static number by default. It will not update automatically as signups come in unless you wire a Supabase real-time subscription or poll your waitlist table for a count. For most pre-launch pages this is fine — pick a plausible early number and update it manually, or use the advanced referral prompt to make it dynamic.
Key UI components
Hero SectionProduct name, one-liner value prop, and the primary email capture form — the single conversion element on the page
Email Input + Submit ButtonInline shadcn Input and Button with client-side email validation before submission
Success StateConfirmation message (or confetti) shown inline after successful email submission — replaces the form without a page reload
Social Proof Counter'X people already waiting' badge — static by default, animatable with Framer Motion useSpring
Product PreviewBlurred or teaser screenshot of the upcoming product to build anticipation
FooterMinimal footer with legal links and unsubscribe notice only
Libraries it leans on
shadcn/ui Input, Button, BadgeCore form elements and the social proof counter badge
SonnerToast notification for submission feedback on success or error
Fork it and get it running
You can have a working waitlist page deployed to a live URL in under five minutes. Here is the exact sequence from community page to live signup collection.
Fork the template from the V0 community page
Go to https://v0.dev/chat/community/JBjhvZxx51N in your browser. On the right side of the community template page, click the blue 'Fork' button in the top-right corner. V0 copies the entire project into your account as a new project. If you are not signed in, V0 will ask you to authenticate with GitHub or email first — the fork action itself is free on all plans.
You should see: The template opens in your V0 editor with the email capture page visible in the Vercel Sandbox preview pane on the right.
Verify the email form and success state load
In the V0 editor preview, confirm the Hero Section renders with the email input form and submit button. Try clicking the submit button with a test email — the Success State component should appear inline replacing the form. If the preview shows a blank input or a component registry error, V0 may need to regenerate a missing shadcn component; try prompting 'Fix any missing shadcn/ui component imports in this project'.
Tip: The email form will not actually send anything in the V0 preview environment — it needs a Server Action wired to a real provider for live submissions.
You should see: The Hero Section shows the email input, submit button, social proof counter, and product teaser image. Submitting triggers the success confirmation.
Add your API keys in the Vars panel
Click the 'Vars' panel in the left sidebar of the V0 editor. Add RESEND_API_KEY (without the NEXT_PUBLIC_ prefix — this is a server-only secret used in the Next.js Server Action). If you are using Supabase for storage instead of or in addition to Resend, add NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY here as well — these two are safe to expose client-side. Never add your SUPABASE_SERVICE_ROLE_KEY as a NEXT_PUBLIC_ variable.
Tip: NEXT_PUBLIC_ variables get baked into the client-side JavaScript bundle — only use that prefix for publishable/anonymous keys, never for secrets.
You should see: Your keys appear in the Vars panel list. V0 makes them available in the preview environment for testing.
Edit copy and branding using Design Mode
Press Option+D (Mac) or Alt+D (Windows) to enter Design Mode. Click on the product name in the Hero Section and type your real product name. Click the value proposition line to update your messaging. Click the submit button label to change it from the default text to 'Join the Waitlist' or your preferred CTA. Update the social proof counter number by clicking that badge text. All Design Mode edits are free — they consume zero V0 credits.
Tip: Update the product preview image by prompting V0 to swap it after your Design Mode copy pass — image changes need a code prompt.
You should see: Your product name, value prop, and CTA button label appear in the live preview with your updated copy.
Publish to Vercel and start collecting signups
Click the Share icon in the top-right of the V0 editor, then select the Publish tab. Click 'Publish to Production'. V0 builds your project and deploys it to a *.vercel.app URL in about 30 seconds. Copy the live URL and start sharing it immediately — if you have already wired up the Resend or Supabase integration, signups will flow into your backend from the moment you share the link.
You should see: A live vercel.app URL is displayed. Submitting the email form on that URL triggers your backend integration.
Connect a custom domain
In the Vercel Dashboard (vercel.com/dashboard), find the project V0 deployed. Go to Settings → Domains, enter your custom domain (e.g., waitlist.yourproduct.com), and click 'Add'. Vercel generates a CNAME record for you to add at your DNS provider. DNS propagation typically takes 5–30 minutes. Once active, your custom domain serves the waitlist page with an auto-issued SSL certificate.
You should see: Your waitlist page is live at your custom domain with HTTPS — share this URL in your launch announcements.
The prompt pack
Copy-paste these straight into v0's chat to customize the Product Launch Waitlisttemplate. Each one names this template's own components — no generic filler.
Swap product copy and accent color
Completes the branding pass — product name, value prop, CTA label, and accent color — across all Hero Section elements in one shot.
Update the Product Launch Waitlist page: set the product name to [PRODUCT_NAME] in the Hero Section headline and the subheadline to [YOUR_VALUE_PROP]. Change the submit button label to 'Join the Waitlist'. Change the primary accent color to hsl(220, 90%, 56%) across the hero background gradient, the shadcn Button, and the Social Proof Counter badge. Update the Footer legal links to point to /privacy and /terms. Keep all shadcn/ui component structure, the Success State logic, and the Sonner toast import intact.
Add an animated social proof counter
Replaces the static social proof number with a smooth count-up animation that runs once when the page loads.
Add an animated social proof counter below the email submit button in the Hero Section. Display 'X people already waiting' where X animates from 0 to 1247 on page mount. Use framer-motion's useMotionValue initialized to 0 and useSpring with stiffness: 60 to animate toward the target. Round the value to an integer using Math.round() during render. Style the counter number with the same accent color as the CTA button and wrap the full line in a shadcn Badge component to match the existing social proof treatment.
Wire email capture to a Next.js Server Action with Resend
Adds real email delivery via Resend triggered from the waitlist form, with server-side validation and a clean success/error UX.
Create a Next.js Server Action at app/actions/waitlist.ts that accepts a FormData email field, validates it with zod using z.string().email(), and calls the Resend API using process.env.RESEND_API_KEY (server-only, no NEXT_PUBLIC_ prefix) to send a confirmation email to the subscriber and a notification to the admin address. Trigger the action from the Hero Section email form using the HTML action attribute or useActionState. On successful submission, update local React state to show the Success State component inline without a page reload. On failure, show a Sonner toast with the error message.
Add Supabase storage with duplicate-email guard
Stores signups in a Supabase table and gracefully handles duplicate email submissions without showing a raw error to the user.
Create a Supabase table waitlist_subscribers with columns: id (uuid primary key default gen_random_uuid()), email (text unique not null), created_at (timestamptz default now()). Enable RLS with an anon INSERT policy. In the Server Action at app/actions/waitlist.ts, use @supabase/supabase-js createClient with process.env.SUPABASE_URL and process.env.SUPABASE_SERVICE_ROLE_KEY (both server-only). After inserting the email, catch PostgreSQL error code 23505 (unique_violation) and return a friendly response object { success: false, message: "You're already on the list!" } instead of throwing. Show the appropriate Sonner toast for both the duplicate and success cases.Add referral tracking with a progress bar unlock
Adds a viral referral loop with real-time progress tracking that unlocks a perk at 5 referrals — a proven pre-launch growth mechanic.
Add a referral tracking layer to the Product Launch Waitlist after signup: show a unique referral link in the Success State using the format ?ref=[uuid] where the uuid is the subscriber's id returned from the Supabase insert. Store referred signups in a Supabase referrals table (referrer_id uuid, referred_email text, created_at timestamptz). Below the Success State, show a dynamic 'You've referred X friends — [PERK] unlocks at 5 referrals' progress bar using a shadcn Progress component. Use a Supabase real-time subscription on the referrals table to update the referred count live without a page reload. Keep NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY for the client-side real-time channel; use SUPABASE_SERVICE_ROLE_KEY only in the Server Action.
Gotchas when you extend it
The failures people actually hit when they push this template past its defaults — and the exact fix for each.
Module not found: Error: Can't resolve '@/components/ui/button'Why: V0's project has shadcn/ui components pre-generated in the project files, but pulling the code via GitHub integration into a fresh local environment or a new project will not include those generated files — they are not in the public shadcn registry, they are generated locally.
Fix: Run `npx shadcn@latest init` to set up the shadcn configuration, then run `npx shadcn add button input badge` to generate the missing component files. Ensure tsconfig.json has `"paths": { "@/*": ["./*"] }` so the @/ alias resolves correctly.
This project is missing shadcn/ui component files. Run npx shadcn@latest init and add button, input, badge, and sonner. Do not regenerate the page — only add missing components.
Email form submits but no confirmation appearsWhy: The Success State is conditional on a React state variable that resets on re-render, or the Server Action completes before the client updates the state — the component tree shows the form again instead of the success message.
Fix: Use useActionState (React 19) or a controlled boolean state variable (const [submitted, setSubmitted] = useState(false)) to track submission. Set it to true in the Server Action response handler and conditionally render the Success State component based on that value.
After the waitlist Server Action succeeds, update the local React state to show the Success State component inline without a page reload.
Stripe webhook signature verification failedWhy: If you add a paid waitlist tier with Stripe, the webhook route handler uses request.json() which parses and consumes the raw body. Stripe needs the raw unparsed bytes to verify the HMAC signature — calling request.json() first destroys that.
Fix: Use `const body = await request.text()` instead of `request.json()` in the App Router webhook route at app/api/webhooks/stripe/route.ts, then pass the raw string to stripe.webhooks.constructEvent().
Fix the Stripe webhook route at app/api/webhooks/stripe/route.ts to use request.text() instead of request.json() before calling stripe.webhooks.constructEvent.
warn: incorrect peer dependency "react@19.0.0" in build logsWhy: V0 generates code targeting React 19 while some installed packages still declare peer dependencies for React 18. These are warnings that don't break the build in isolation, but they can cascade and cause install failures if a strict package manager is used.
Fix: Explicitly pin react and react-dom to ^19.0.0 in package.json, and add an .npmrc file with `legacy-peer-deps=true` to silence the warnings during CI installs.
Update package.json to explicitly set react and react-dom to ^19.0.0 and add an .npmrc file with legacy-peer-deps=true to silence peer dependency warnings.
Template vs. custom — the honest call
A forked template gets you far, fast. Here's where it holds up, and where you'll outgrow it.
The template is enough when
- You're launching in days and need a working email capture form live today
- You have fewer than 1,000 expected signups and a simple email provider handles delivery fine
- You want to test your messaging and value prop before investing in a full marketing site
- You don't need auth, dashboards, or referral tracking on day one
Go custom when
- You need a complex multi-step onboarding flow with qualification questions after email capture
- Your growth team requires A/B testing infrastructure and per-variant event tracking
- You need CRM integration with HubSpot or Salesforce requiring custom webhook mapping and lead routing
- You're running a regulated campaign (healthcare, finance) requiring explicit consent tracking and audit logs
RapidDev can wire your V0 waitlist prototype to a real email provider, Supabase backend, and analytics stack — turning a template into a launch-ready acquisition engine in a few days.
Frequently asked questions
Is the Product Launch Waitlist V0 template free?
Yes. Forking V0 community templates is free on all plans including the free tier. The fork action itself consumes no V0 credits. You will use credits when you prompt V0 to make code changes after forking.
Can I use this template commercially — for a paid product launch?
Yes. V0 community templates are licensed for commercial use. You own the forked project and can deploy it to collect signups for any commercial product launch. Review V0's terms of service for the exact license text.
How do I store emails from a V0 waitlist?
Supabase is the most common backend pairing. Create a `waitlist_subscribers` table (id, email, created_at), enable RLS with an anon INSERT policy, and use a Next.js Server Action with @supabase/supabase-js to insert signups. Use process.env.SUPABASE_SERVICE_ROLE_KEY (server-only) for the insert client, not the anon key. See the 'Add Supabase storage with duplicate-email guard' prompt in the pack above.
Why does my fork look broken in the V0 preview after I add a new library?
V0's Vercel Sandbox preview uses esm.sh for module resolution. Some npm packages — particularly those with native bindings or that access browser globals during import — fail to load in the esm.sh sandbox. If an import breaks the preview, try prompting V0 to lazy-load the library with Next.js dynamic() or to use a lighter alternative (e.g., Sonner instead of a heavier toast library).
How do I display a real-time signup count instead of a hardcoded number?
Add a Supabase real-time subscription on the waitlist_subscribers table using @supabase/supabase-js createClient with your NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Listen for INSERT events and increment a local state counter inside a useEffect hook in a Client Component. The animated counter prompt in the pack above gives you the Framer Motion animation layer on top of that live count.
What email provider should I use with this template?
Resend is the most common choice for V0 waitlist pages — it has a generous free tier (100 emails/day, 3,000/month), an official Node.js SDK, and works cleanly with Next.js Server Actions. Alternatively, you can skip email delivery entirely and just store signups in Supabase, then export the email list later.
Can RapidDev customize this waitlist template for my launch?
Yes. RapidDev wires V0 waitlist prototypes to real email providers, Supabase backends, and analytics setups — turning a template into a production acquisition engine. If you need referral tracking, A/B testing, or CRM integration beyond what the template covers out of the box, that's the type of work RapidDev handles.
Outgrowing the template?
RapidDev turns v0 prototypes into production apps — real auth, database, and payments — at $13K–$25K.
Book a free consultation30-min call. No commitment.