User & content

Waitlist Block

An email waitlist signup section with headline, subheading, email input, and submit button. Shows a success confirmation after submission. Handles loading state and error messages.

Be the first to know

We're launching soon. Join the waitlist for early access and exclusive updates.

import { WaitlistBlock } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add waitlist-block

Import

import.tsx

import { WaitlistBlock } from "@aetherstack/blocks"

Usage

waitlist-block.tsx

import { WaitlistBlock } from "@aetherstack/blocks"

export default function WaitlistPage() {
  async function handleSubmit(email: string) {
    await fetch("/api/waitlist", {
      method: "POST",
      body: JSON.stringify({ email }),
      headers: { "Content-Type": "application/json" },
    })
  }

  return (
    <WaitlistBlock
      headline="Be the first to know"
      subheading="We're launching soon. Join the waitlist to get early access."
      ctaLabel="Join waitlist"
      onSubmit={handleSubmit}
      successMessage="You're on the list! We'll be in touch soon."
    />
  )
}

Props

Prop	Type	Default	Description
headline	string	'Join the waitlist'	Section heading.
subheading	string	—	Supporting paragraph below the headline.
placeholder	string	'Enter your email address'	Email input placeholder text.
ctaLabel	string	'Get early access'	Submit button label.
onSubmit	(email: string) => Promise<void>	—	Async callback called with the submitted email. Throwing triggers the error state.
successMessage	string	'You're on the list!'	Message shown after successful submission.
className	string	—	Additional classes on the section wrapper.

* Required

Accessibility

→Email input has type='email' and aria-label='Email address'.
→Error messages use role='alert' for immediate screen reader announcement.
→The loading spinner is aria-hidden; the button text remains visible.