# <Waitlist /> component

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](https://clerk.com/docs/guides/secure/restricting-access.md?sdk=react#manage-users-on-your-waitlist), users receive an email with instructions on how to join your app.

Learn more about [using and customizing **Waitlist** mode](https://clerk.com/docs/guides/secure/restricting-access.md?sdk=react#waitlist).

## Enable Waitlist mode

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

In [**Waitlist** mode](https://clerk.com/docs/guides/secure/restricting-access.md?sdk=react#waitlist), 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.

> [**Email** must be enabled in the Clerk Dashboard](https://clerk.com/docs/guides/configure/auth-strategies/sign-up-sign-in-options.md?sdk=react#email) 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**](https://dashboard.clerk.com/~/user-authentication/waitlist) page.
2. Toggle on **Enable waitlist** and select **Save**.

## Example

> Before using the `<Waitlist />` component, you must provide the `waitlistUrl` prop either in the [<ClerkProvider>](https://clerk.com/docs/react/reference/components/clerk-provider.md#properties) or [<SignIn />](https://clerk.com/docs/react/reference/components/authentication/sign-in.md#properties) 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.

filename: src/pages/waitlist.tsx
```tsx
import { Waitlist } from '@clerk/react'

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

## Properties

All props are optional.

| Name                  | Type                    | Description                                                                                                                                                               |
| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| afterJoinWaitlistUrl? | string                  | The full URL or path to navigate to after joining the waitlist.                                                                                                           |
| appearance?           | Appearance | undefined | An object to style your components. Will only affect Clerk components and not Account Portal pages.                                                                       |
| fallback?             | ReactNode               | An element to be rendered while the component is mounting.                                                                                                                |
| signInUrl?            | string                  | 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](https://clerk.com/docs/react/guides/customizing-clerk/appearance-prop/overview.md).

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)