# Build a custom waitlist page

**Before you start**

- [Follow the quickstart guide.](https://clerk.com/docs/getting-started/quickstart.md?sdk=nextjs)

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

If your application is using Clerk's [Account Portal](https://clerk.com/docs/guides/account-portal/overview.md?sdk=nextjs), the waitlist flow is handled out of the box. No further setup is required.

If you do not want to use the Account Portal and want to host the prebuilt components in your app, this guide shows you how to **set up a custom waitlist page** in your application. This guide assumes that you have set up [dedicated sign-in or sign-up pages](https://clerk.com/docs/nextjs/guides/development/custom-sign-in-or-up-page.md) for your application.

1. ## Enable Waitlist mode

   > [**Email** must be enabled in the Clerk Dashboard](https://clerk.com/docs/guides/configure/auth-strategies/sign-up-sign-in-options.md?sdk=nextjs#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**.
2. ## Build the waitlist page

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

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

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

   ```tsx
   import { Waitlist } from '@clerk/nextjs'

   export default function WaitlistPage() {
     return <Waitlist />
   }
   ```
3. ## Provide the `waitlistUrl` prop

   The `waitlistUrl` prop is used to specify the URL of your waitlist page. It should point to the route where your `<Waitlist />` component is mounted. If `undefined`, the user will be redirected to the [Account Portal waitlist page](https://clerk.com/docs/guides/account-portal/overview.md?sdk=nextjs#waitlist). You'll need to set `waitlistUrl` where you initialize Clerk.

   Pass the `waitlistUrl` prop to the [<ClerkProvider>](https://clerk.com/docs/nextjs/reference/components/clerk-provider.md) component, ensuring it matches your waitlist route.

   ```tsx
   <ClerkProvider waitlistUrl="/waitlist">
     {/* rest of your layout */}
   </ClerkProvider>
   ```
4. ## Manage users on your waitlist

   Once users join your waitlist, you can manage their access from the Clerk Dashboard. You can approve, deny, or re-invite users.

   To manage a user on your waitlist:

   1. In the Clerk Dashboard, navigate to the [**Waitlist**](https://dashboard.clerk.com/~/waitlist) page.
   2. On the right-side of the user's row, select the menu icon (...).
   3. If the user's invitation status is **Waitlist**, you can select **Invite** or select **Revoke** to deny their invitation. To re-invite a user, you must first revoke their existing invitation. Once their invitation is **Revoked**, select the menu icon (...) and select **Re-invite**.

---

## Sitemap

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