Launch and waitlist

The moment before and at a launch, in six layouts: a waitlist with your place in line, a countdown stage, a launch film, an early access invitation, an announcement with figures and a blurred teaser.

6 variants

Switch category

Waitlist with place in line

Email sign-up that turns into a place in line and a referral link to move up.

Open in Studio

Installv1.0.1

aiw add @ai-website/launch

Brings along utils, kit, icon, section, button

Usage

<Launch variant="waitlist" title="…" waiting={2847} onSubmit={(email) => …} />

Source

Countdown stage

Large ticking digits on a grid, with the date and a reminder.

Open in Studio

Installv1.0.1

aiw add @ai-website/launch

Brings along utils, kit, icon, section, button

Usage

<Launch variant="countdown" title="…" remaining={seconds} date="…" actions={…} />

Source

Launch with film

The launch film plays in place, key facts below it.

Open in Studio

Installv1.0.1

aiw add @ai-website/launch

Brings along utils, kit, icon, section, button

Usage

<Launch variant="video" title="…" media={<img … />} facts={[{ label, value }]} />

Source

Early access invitation

A ticket with invite code, perforation and seats left, perks beside it.

Open in Studio

Installv1.0.1

aiw add @ai-website/launch

Brings along utils, kit, icon, section, button

Usage

<Launch variant="early-access" title="…" invite={{ code, from, perks, seats, total }} onSubmit={(code) => …} />

Source

Announcement with figures

Headline and text side by side, a large screen and figures that count up.

Open in Studio

Installv1.0.1

aiw add @ai-website/launch

Brings along utils, kit, icon, section, button

Usage

<Launch variant="announcement" title="…" media={…} stats={[{ value, label, suffix, decimals }]} />

Source

Blurred teaser

A soft preview under the headline, notify me and the features to come.

Open in Studio

Installv1.0.1

aiw add @ai-website/launch

Brings along utils, kit, icon, section, button

Usage

<Launch variant="teaser" title="…" media={…} features={[{ icon, title }]} onSubmit={(email) => …} />

Source

Details

What Launch and waitlist brings along, read from the registry and the source.

Area: Marketing
Variants: 6
Version: 1.0.1 · since 1.0.0
File: components/ui/launch.tsx
Brings along: utilskiticonsectionbutton
npm packages: None
Languages: English and German, 27 texts of its own
Studio: All 6 variants editable
In collections: Event
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The LaunchProps interface from components/ui/launch.tsx, with the comments from the code.

variantoptional
LaunchVariant
waitlistcountdownvideoearly-accessannouncementteaser
eyebrowoptional
React.ReactNode
titlerequired
React.ReactNode
descriptionoptional
React.ReactNode
actionsoptional
React.ReactNode
waitingoptional
number
waitlist: people already waiting, and the place a new sign-up gets
remainingoptional
number
countdown: seconds until launch when the page was built. Ticks down in the browser.
dateoptional
string
countdown: the launch date as text, e.g. "December 1, 9:00 CET"
mediaoptional
React.ReactNode
video, announcement, teaser: the picture or film still
factsoptional
{ label: string; value: string }[]
video: chapters or facts shown under the film
inviteoptional
{ code: string; from?: string; perks: string[]; seats: number; total: number }
early-access: the invitation
statsoptional
{ value: number; label: string; prefix?: string; suffix?: string; decimals?: number }[]
announcement: key figures, counted up when they scroll into view
featuresoptional
{ icon?: IconName; title: string }[]
teaser: features hidden until launch
onSubmitoptional
(value: string) => void
waitlist, early-access, teaser: called with the email address or the invite code

Built-in texts

Launch and waitlist writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 27 texts

Key	English	German
email	English Email address	German E-Mail-Adresse
emailPh	English you@company.com	German du@firma.de
join	English Join the waitlist	German Auf die Warteliste
invalid	English Please enter a valid email address.	German Bitte gib eine gültige E-Mail-Adresse ein.
position	English Your place in line	German Dein Platz in der Reihe
ahead	English people ahead of you	German Personen vor dir
share	English Move up by sharing your link	German Mit deinem Link rückst du vor
copy	English Copy link	German Link kopieren
copied	English Copied	German Kopiert
each	English Each friend who joins moves you up 25 places.	German Jede Person, die über dich kommt, bringt dich 25 Plätze nach vorn.
joined	English people already waiting	German Menschen warten schon
days	English Days	German Tage
hours	English Hours	German Stunden
minutes	English Minutes	German Minuten
seconds	English Seconds	German Sekunden
live	English We are live	German Wir sind live
remind	English Remind me	German Erinnere mich
play	English Play the launch film	German Startfilm abspielen
pause	English Pause	German Pause
invite	English Invitation	German Einladung
code	English Your invite code	German Dein Einladungscode
seats	English seats left	German Plätze frei
accept	English Accept invitation	German Einladung annehmen
accepted	English You are in. Check your inbox for the next step.	German Du bist dabei. In deinem Postfach liegt der nächste Schritt.
notify	English Notify me	German Benachrichtige mich
notified	English We will let you know the minute it is ready.	German Wir melden uns, sobald es so weit ist.
launching	English Launching	German Start

Read from the source of the component.

Sets aria-busy, aria-describedby, aria-invalid, aria-label and aria-live, so screen readers announce purpose and state.
Uses the roles alert, status and timer.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 16 places in the code switch motion off then.

Frequent questions

How do I install Launch and waitlist?

With aiw add @ai-website/launch. The command puts components/ui/launch.tsx into your project, the code is yours from then on. It brings along icon, section and button. It needs no further npm packages.

Which variants does Launch and waitlist have?

6 variants, Waitlist with place in line, Countdown stage, Launch with film, Early access invitation, Announcement with figures and Blurred teaser. You pick one with the variant prop, for example variant="countdown".

Can I translate the texts of Launch and waitlist?

Yes. Launch and waitlist carries 27 texts of its own in English and German, such as “Email address”, “you@company.com” and “Join the waitlist”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Launch and waitlist?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Launch and waitlist with aiw_components and install it with aiw_add @ai-website/launch. Name the variant in your prompt, for example variant="waitlist", and the assistant writes your content straight into the props.

Can I adjust Launch and waitlist without code?

Yes, in the Studio. All 6 variants are editable there, texts, lists and switches. The Studio writes the matching Launch code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Launch and waitlist on a page.