Koala UI

Waitlist Form

A centered waitlist block: a headline, a one-row email capture and a social-proof footer with overlapping avatars and a running count. On submit it flips to a confirmed state; wire onJoin to your list.

Early access

Join the waitlist

Be the first to know when we launch. We'll send a single email when your invite is ready.

AJMS

1,284+ already joined

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Add this component (its dependencies come along)npx koalaui-cli@latest add waitlist-form

Usage#

usage.tsxTSX
"use client"import { WaitlistForm } from "@/components/ui/waitlist-form"export function Example() {  async function join(email: string) {    await fetch("/api/waitlist", { method: "POST", body: JSON.stringify({ email }) })  }  return <WaitlistForm count={1284} onJoin={join} />}

API reference#

WaitlistForm

Composes Input, Button, and Avatar. Forwards all <div> props.

  • onJoin: (email: string) => void | Promise<void>.
  • count: people already joined, shown beside the avatars (tabular-nums).
  • avatars: { src?, fallback, alt? }[] for the proof stack.
  • badge, title, description, placeholder, action: override the copy.

FAQ#

Wire `onJoin`, which is called with the entered email on a valid submit. It accepts `(email: string) => void | Promise<void>`; the form owns its own email and status, so all you do is hand the email to your backend or email provider.