Skip to main content

<Waitlist /> component

Theme

The <Waitlist /> component renders a form that allows users to join for early access to your app. Users receive an email confirming their request to join the waitlist. Once approved, users receive an email with instructions on how to join your app.

Learn more about using and customizing Waitlist mode.

Enable Waitlist mode

Before using the <Waitlist /> component, you must enable Waitlist mode in the Clerk Dashboard.

In Waitlist mode, users can register their interest in your app by joining a waitlist. Existing users and users who have been approved from the waitlist will be able to sign in to your app, while new users will need to join the waitlist to access your app. This mode is ideal for apps in early development stages or those wanting to generate interest before launch.

Warning

Email must be enabled in the Clerk Dashboard to allow waitlist invitation emails to be sent to users after they are approved. Support for sending waitlist invitations when Email is disabled is actively being worked on.

To enable Waitlist mode:

  1. In the Clerk Dashboard, navigate to the Waitlist page.
  2. Toggle on Enable waitlist and select Save.

Warning

Before using the <Waitlist /> component, you must provide the waitlistUrl prop either in the <ClerkProvider> or <SignIn /> component to ensure proper functionality.

The following example includes a basic implementation of the <Waitlist /> component. You can use this as a starting point for your own implementation.

waitlist.vue
<script setup lang="ts">
import { Waitlist } from '@clerk/vue'
</script>

<template>
  <Waitlist />
</template>

Properties

All props are optional.

  • Name
    afterJoinWaitlistUrl?
    Type
    string
    Description

    The full URL or path to navigate to after joining the waitlist.

  • Name
    appearance?
    Type
    Appearance | undefined
    Description

    An object to style your components. Will only affect Clerk components and not Account Portal pages.

  • Name
    fallback?
    Type
    ReactNode
    Description

    An element to be rendered while the component is mounting.

  • Name
    signInUrl?
    Type
    string
    Description

    The full URL or path to the sign in page. Used for the 'Already have an account? Sign in' link that's rendered. It's recommended to use the environment variable instead.

Customization

To learn about how to customize Clerk components, see the customization guide.

Feedback

What did you think of this content?

Last updated on