Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Waitlist morph

One pill that becomes each step of joining a list: a button, an email field with its send arrow, then a confirmation with a drawn check. The width eases between the measured width of each step, so nothing jumps.

Pro
pnpm dlx shadcn@latest add @caliper/waitlist-morph

Halden for iPhone

The beta opens in November 2026. We email once, when your invite is ready.

Installs components/ui/waitlist-morph.tsxDepends on lucide-reactMotion shared motion tokens

When to use

Use it for

  • Launch pages, early access and newsletter sign up.
  • Any single-field capture that should stay small until used.

Skip it when

  • Forms with more than one field; use the newsletter signup or a form.
  • Places where the field must be visible from the start.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Errors say why
A bad address shakes the pill once and a message under it says what is wrong; the field keeps focus.
Escape goes back
From the field, Escape returns to the button and puts focus on it.

Usage

Your request decides success
onJoin may return a promise; a rejection shows its message and reopens the field.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/waitlist-morph

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { WaitlistMorph } from "@/components/ui/waitlist-morph"

The worked example comes with Pro

The 31-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

WaitlistMorph

component
PropTypeDefaultDescription
onJoin *(email: string) => void | Promise<void>—Called with the address. Throw (or reject) with a message to show it.
labelstring"Join the waitlist"
doneLabelstring"You're on the list"
placeholderstring"you@company.com"
classNamestring—

Accessibility

It exposes status semantics, with aria-invalid, aria-describedby, aria-label and aria-hidden kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
EscapeCloses or cancels, then returns focus to where it came from.

Motion

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.

All Playful fields examples