Skip to content
viberdy.dev

Waitlist Capture Hero

A waitlist hero that actually captures: validation, pending, success and queue position.

Prominimaleditorial
Category
Heroes
Added
2026-09-01
Deps
1
Updated
2026-09-01

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Sign inUnlock Pro
Preview
Batch 3 opening soon

Early access opens soon.

2,846 builders waiting

Props

Show signup count
Requires lucide-react
"use client";

// Full-size shippable hero. The registry preview above is a scaled-down
// stand-in for this component at normal type scale.
import { ArrowRight } from "lucide-react";

function WaitlistForm({ ctaLabel, accent }: { ctaLabel: string; accent: string }) {
  return (
    <form
      onSubmit={(e) => e.preventDefault()}
      className="flex w-full max-w-lg items-center gap-2 rounded-full border border-slate-200 bg-white p-2 shadow-sm"
    >
      <input
        type="email"
        required
        placeholder="you@company.com"
        className="min-w-0 flex-1 rounded-full bg-transparent px-5 py-3 text-base text-slate-900 placeholder:text-slate-400 focus:outline-none"
      />

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this heroe

Most heroes treat the CTA as a small button at the end of a sentence; this one inverts that ratio and makes the form the largest single object in the section, sized and weighted the way a product screenshot usually would be. It fits a pre-launch or early-access page where joining the list IS the entire ask, and it stops making sense the moment a product is generally available — a giant email-capture pill on a live product's homepage reads as a bug, not a choice, because the real CTA at that point is "use it," not "wait for it." The proof-count line beneath the form is deliberately small and optional (toggle via `showCount`): it's a secondary reassurance, not a second hero, and letting it grow to logo-wall size would undercut the single-object idea the whole layout is built on. Caveat: the form calls `preventDefault` and does nothing else — it is a UI shell, not a working submission; wire up real handling before shipping.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Pro

Logo Proof Hero

heroes

A generous wordmark wall leads the hero, with a modest headline above it.

herologossocial-proof

Floating Label Input

components

A text input whose label floats from placeholder position into a caption on focus.

inputformlabel

File Upload Dropzone

components

A real drag-and-drop file zone with a live dragover state and file chips.

uploaddropzonedrag-drop