āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/components/authentication/waitlist ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
title: '<Waitlist /> component'
description: The <Waitlist /> component renders a waitlist form that allows users to join for early access to your application.
sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
{{ style: { maxWidth: '460px' } }}
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.
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.
<If sdk={["astro", "chrome-extension", "expo", "nextjs", "nuxt", "react", "react-router", "remix", "tanstack-react-start", "vue"]}
Example
[!WARNING] Before using the
<Waitlist />component, you must provide thewaitlistUrlprop 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.
export default function WaitlistPage() {
return <Waitlist />
}
```
function App() {
return <Waitlist />
}
export default App
```
<WaitlistAstro />
```
```jsx {{ filename: '/app/waitlist.web.tsx' }}
import { Waitlist } from '@clerk/clerk-expo/web'
export default function WaitlistPage() {
return <Waitlist />
}
```
export default function WaitlistPage() {
return <Waitlist />
}
```
export default function WaitlistPage() {
return <Waitlist />
}
```
export default function WaitlistPage() {
return <Waitlist />
}
```
export const Route = createFileRoute('/waitlist')({
component: WaitlistPage,
})
function WaitlistPage() {
return <Waitlist />
}
```
<template>
<Waitlist />
</template>
```
<template>
<Waitlist />
</template>
```
The following methods available on an instance of the Clerk class are used to render and control the <Waitlist /> component:
The following examples assume that you followed the quickstart to add Clerk to your JavaScript app.
<code>mount<wbr />Waitlist()</code>
Render the <Waitlist /> component to an HTML <div> element.
function mountWaitlist(node: HTMLDivElement, props?: WaitlistProps): void
<code>mount<wbr />Waitlist()</code> params
<Properties> - `node` - [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)The `<div>` element used to render in the `<Waitlist />` component
---
- `props?`
- [`WaitlistProps`](#properties)
The properties to pass to the `<Waitlist />` component
mountWaitlist() usage
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerk = new Clerk('{{pub_key}}')
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="waitlist"></div>
`
const waitlistDiv = document.getElementById('waitlist')
clerk.mountWaitlist(waitlistDiv)
<code>unmount<wbr />Waitlist()</code>
Unmount and run cleanup on an existing <Waitlist /> component instance.
function unmountWaitlist(node: HTMLDivElement): void
unmountWaitlist() params
<Properties>
- `node`
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
The container `<div>` element with a rendered `<Waitlist />` component instance
unmountWaitlist() usage
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerk = new Clerk('{{pub_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
<Properties>
- `props?`
- [`WaitlistProps`](#properties)
The properties to pass to the `<Waitlist />` component
openWaitlist() usage
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerk = new Clerk('{{pub_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
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerk = new Clerk('{{pub_key}}')
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="waitlist"></div>
`
const waitlistDiv = document.getElementById('waitlist')
clerk.openWaitlist(waitlistDiv)
// ...
clerk.closeWaitlist(waitlistDiv)
Properties
All props are optional.
<Properties> - `afterJoinWaitlistUrl` - `string`The full URL or path to navigate to after joining the waitlist.
appearance- <code>Appearance | undefined</code>
Optional object to style your components. Will only affect Clerk components and not Account Portal pages.
fallback?ReactNode
An optional element to be rendered while the component is mounting.
signInUrlstring
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. </Properties>
Customization
To learn about how to customize Clerk components, see the customization guide.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā