`<Waitlist />` component

In Waitlist mode, users can register their interest in your app by joining a waitlist. This mode is ideal for apps in early development stages or those wanting to generate interest before launch. Learn more about additional features available in Waitlist mode.

The <Waitlist /> component renders a form that allows users to join for early access to your app.

Note

If you're using Next.js, the<Waitlist /> component is available in @clerk/nextjs@6.2.0 and above.

Enable Waitlist mode

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

In the Clerk Dashboard, navigate to the Restrictions page.
Under the Sign-up modes section, enable Waitlist.

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
Optional object to style your components. Will only affect Clerk components and not Account Portal pages.
Name
fallback?
Type
ReactNode
Description
An optional 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.

Usage with frameworks

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.

Next.js

React

Astro

Expo

Tanstack React Start

Vue

app/waitlist/[[...waitlist]]/page.tsx

import { Waitlist } from '@clerk/nextjs'

export default function WaitlistPage() {
  return <Waitlist />
}

src/waitlist.tsx

import { Waitlist } from '@clerk/clerk-react'

export default function WaitlistPage() {
  return <Waitlist />
}

pages/waitlist.astro

---
import { Waitlist as WaitlistAstro } from '@clerk/astro/components'
---

<WaitlistAstro />

Note

This component can be used in Expo Web projects, but won't work in native environments (iOS or Android). For native apps, use the supported native components instead.

/app/waitlist.web.tsx

import { Waitlist } from '@clerk/clerk-expo/web'

export default function WaitlistPage() {
  return <Waitlist />
}

app/routes/waitlist.tsx

import { Waitlist } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/waitlist')({
  component: WaitlistPage,
})

function WaitlistPage() {
  return <Waitlist />
}

waitlist.vue

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

<template>
  <Waitlist />
</template>

Usage with JavaScript

The following methods available on an instance of the class are used to render and control the <Waitlist /> component:

The following examples assume that you followed the to add Clerk to your JavaScript app.

`mountWaitlist()`

Render the <Waitlist /> component to an HTML <div> element.

function mountWaitlist(node: HTMLDivElement, props?: WaitlistProps): void

`mountWaitlist()` params

Name
node
Type
HTMLDivElement
Description
The <div> element used to render in the <Waitlist /> component
Name
props?
Type
WaitlistProps
Description
The properties to pass to the <Waitlist /> component

`mountWaitlist()` usage

main.js

import { Clerk } from '@clerk/clerk-js'

// Initialize Clerk with your Clerk Publishable Key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY')
await clerk.load()

document.getElementById('app').innerHTML = `
  <div id="waitlist"></div>
`

const waitlistDiv = document.getElementById('waitlist')

clerk.mountWaitlist(waitlistDiv)

`unmountWaitlist()`

Unmount and run cleanup on an existing <Waitlist /> component instance.

function unmountWaitlist(node: HTMLDivElement): void

`unmountWaitlist()` params

Name
node
Type
HTMLDivElement
Description
The container <div> element with a rendered <Waitlist /> component instance

`unmountWaitlist()` usage

main.js

import { Clerk } from '@clerk/clerk-js'

// Initialize Clerk with your Clerk Publishable Key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY')
await clerk.load()

document.getElementById('app').innerHTML = `
  <div id="waitlist"></div>
`

const waitlistDiv = document.getElementById('waitlist')

clerk.mountWaitlist(waitlistDiv)

// ...

clerk.unmountWaitlist(waitlistDiv)

`openWaitlist()`

Opens the <Waitlist /> component as an overlay at the root of your HTML body element.

function openWaitlist(props?: WaitlistProps): void

`openWaitlist()` params

Name
props?
Type
WaitlistProps
Description
The properties to pass to the <Waitlist /> component

`openWaitlist()` usage

main.js

import { Clerk } from '@clerk/clerk-js'

// Initialize Clerk with your Clerk Publishable Key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY')
await clerk.load()

document.getElementById('app').innerHTML = `
  <div id="waitlist"></div>
`

const waitlistDiv = document.getElementById('waitlist')

clerk.openWaitlist(waitlistDiv)

`closeWaitlist()`

Closes the waitlist overlay.

function closeWaitlist(): void

`closeWaitlist()` usage

main.js

import { Clerk } from '@clerk/clerk-js'

// Initialize Clerk with your Clerk Publishable Key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY')
await clerk.load()

document.getElementById('app').innerHTML = `
  <div id="waitlist"></div>
`

const waitlistDiv = document.getElementById('waitlist')

clerk.openWaitlist(waitlistDiv)

// ...

clerk.closeWaitlist(waitlistDiv)

Customization

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

Edit on GitHub

Last updated on Oct 1, 2025

<Waitlist /> component

Feedback

`<Waitlist />` component