Waitlist Management

Build hype for your product with a beautiful waitlist form. Capture emails, ask for extra context, and hand submissions off to your onboarding flow.

For complete documentation and more examples, visit https://authcore-liard.vercel.app/

Features

  • Accessible, responsive form with required name/email fields and inline validation.
  • Collect extra metadata through configurable custom fields.
  • Success state with customizable confirmation messaging.
  • Appearance overrides for form layout, fields, and submit button.
  • API-first design that posts to a configurable endpoint.
  • Loading and disabled states to prevent duplicate submissions.

Installation

bash

Basic Usage

tsx

The form asks for a required name and email by default. Add extra inputs by passing customFields so you can capture company details, product interests, or anything else you need for triage.

Live Demo

Custom Styling

tsx

Props

  • tenantId?: string

    Scope submissions to a specific tenant when operating multi-tenant waitlists.

  • organizationId?: string

    Associate entries with an organization identifier for downstream processing.

  • onSuccess?: (entry: any) => void

    Called after a successful submission with the API response payload.

  • customFields?: Array<{ name: string; label: string; type?: 'text' | 'email' | 'tel' | 'textarea'; required?: boolean; placeholder?: string }>

    Add additional fields (text, email, tel, textarea) and validation rules.

  • apiEndpoint?: string

    Override the default API route (/api/waitlist).

  • appearance?: { elements?: { form?: string; formField?: string; submitButton?: string } }

    Apply className overrides to form, formField, and submitButton slots.

  • successMessage?: string

    Customize the confirmation text shown after a user joins the list.

  • asCard?: boolean

    Disable the default card wrapper when embedding inside your own layout.

API Implementation

Add to Waitlist

Endpoint: POST /api/waitlist

typescript

Admin Management

Endpoint: GET/PATCH /api/waitlist/admin

typescript

Invite Flow

Create an exclusive invite system with limited spots:

typescript

Database Schema

The waitlist system uses the following Prisma model:

model Waitlist {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  status    String   @default("pending") // pending, approved, rejected
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Use Cases

Product Launch

Build anticipation before your product launches. Collect emails and send invites in batches.

Beta Access

Manage beta testers with queue positions. Gradually expand access as you scale.

Exclusive Features

Gate premium features behind a waitlist. Create scarcity and demand.

Learn More

Tips

  • Server APIs: Keep Prisma and email-sending logic inside API routes (not top-level module code) to avoid build-time errors when using SSG.
  • Rate limiting: Add basic throttling (IP/email) on /api/waitlist to prevent spam and abuse.
  • Accessibility: Ensure form labels and error messages are announced by screen readers; provide clear success feedback when a user signs up.
  • Testing: Mock email sending and Prisma in tests; validate duplicate-check and queue-position logic with edge-case inputs.