Koala UI

Waitlist Form

Pro

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# Activate your Pro license (once per machine)npx koalaui-cli@latest login <key># Add this component (its dependencies come along)npx koalaui-cli@latest add waitlist-form

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

API reference#

WaitlistForm

The whole block: badge, headline, a one-row email capture (Input and Button) and an Avatar proof stack. It owns its email and status, validates the address on submit and flips to a confirmed state. Forwards all native <div> props; className is merged last.

PropTypeDefaultDescription
onJoin(email: string) => void | Promise<void>-Called with the entered email on a valid submit. Return a promise to drive the button spinner.
countnumber1200People already on the list, shown beside the avatars as 1,200+ with tabular-nums. 0 hides the proof row.
avatarsWaitlistAvatar[]4 initialsThe proof stack, each { src?, fallback, alt? }.
badgeReactNode"Early access"Pill above the headline. Pass null to hide it.
titleReactNode"Join the waitlist"The headline, rendered as an <h3>. Pass null to hide it.
descriptionReactNodean invite noteSupporting line under the headline. Pass null to hide it.
placeholderstring"you@company.com"Placeholder of the email field.
actionReactNode"Join"Label of the join button, followed by an arrow icon.
density"compact" | "comfortable""compact"Padding, gap and title size: compact is 16px, comfortable 24px. Falls back to the nearest DensityProvider.

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.