feat: Introduce Waitlist component docs

docs/components/waitlist/overview.mdx

@@ -0,0 +1,346 @@
+---
+title: '`<Waitlist />` component'
+description: Clerk's <Waitlist /> component is used to render a waitlist form that allows users to join for early access to your application.
+---
+
+![Clerk's \<Waitlist /> component is used to render a waitlist form that allows users to join for early access to your application.](/docs/images/ui-components/waitlist.svg)
+
+Clerk's `<Waitlist />` component is used to render a waitlist form that allows users to join for early access to your application.
+
+## Properties
+
+All props are optional.
+
+<Properties>
+  - `appearance`
+  - <code>[Appearance](/docs/customization/overview) | undefined</code>
+
+  Optional object to style your components. Will only affect [Clerk components](/docs/components/overview) and not [Account Portal](/docs/customization/account-portal/overview) pages.
+
+  ---
+
+  - `afterJoinWaitlistUrl`
+  - `string`
+
+  Full URL or path to navigate after join waitlist.
+
+  ---
+
+  - `signInUrl`
+  - `string`
+
+  Full URL or path where the SignIn component is mounted.
+</Properties>
+
+## Usage with frameworks
+
+The following example includes a basic implementation of the `<Waitlist />` component. You can use this as a starting point for your own implementation.
+
+<Tabs type="framework" items={["Next.js", "React"]}>
+  <Tab>
+    <CodeBlockTabs type="router" options={["App Router", "Pages Router"]}>
+      ```jsx {{ filename: '/app/waitlist/[[...waitlist]]/page.tsx' }}
+      import { Waitlist } from '@clerk/nextjs'
+
+      export default function WaitlistPage() {
+        return <Waitlist />
+      }
+      ```
+
+      ```jsx {{ filename: '/pages/waitlist/[[...index]].tsx' }}
+      import { Waitlist } from '@clerk/nextjs'
+
+      export default function WaitlistPage() {
+        return <Waitlist />
+      }
+      ```
+    </CodeBlockTabs>
+  </Tab>
+
+  <Tab>
+    ```jsx {{ filename: '/waitlist.tsx' }}
+    import { Waitlist } from '@clerk/clerk-react'
+
+    export default function WaitlistPage() {
+      return <Waitlist />
+    }
+    ```
+  </Tab>
+</Tabs>
+
+## Usage with JavaScript
+
+The following methods available on an instance of the [`Clerk`](/docs/references/javascript/clerk/clerk) class are used to render and control the `<Waitlist />` component:
+
+- [`mountWaitlist`](#mount-waitlist)
+- [`unmountWaitlist`](#unmount-waitlist)
+- [`openWaitlist`](#open-waitlist)
+- [`closeWaitlist`](#close-waitlist)
+
+The following examples assume that you have followed the [quickstart](/docs/quickstarts/javascript) in order to add Clerk to your JavaScript application.
+
+### <code>mount<wbr />Waitlist()</code>
+
+Render the `<Waitlist />` component to an HTML `<div>` element.
+
+```typescript
+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 `<Watilist />` component
+
+  ---
+
+  - `props?`
+  - [`WaitlistProps`](#properties)
+
+  The properties to pass to the `<Watilist />` component
+</Properties>
+
+#### `mountWaitlist()` usage
+
+<CodeBlockTabs options={['NPM module', '<script>']}>
+  ```js {{ filename: 'main.js', mark: [13] }}
+  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)
+  ```
+
+  ```html {{ filename: 'index.html', mark: [20] }}
+  <!-- Add a <div id="waitlist"> element to your HTML -->
+  <div id="waitlist"></div>
+
+  <!-- Initialize Clerk with your
+  Clerk Publishable key and Frontend API URL -->
+  <script
+    async
+    crossorigin="anonymous"
+    data-clerk-publishable-key="{{pub_key}}"
+    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
+    type="text/javascript"
+  ></script>
+
+  <script>
+    window.addEventListener('load', async function () {
+      await Clerk.load()
+
+      const waitlistDiv = document.getElementById('waitlist')
+
+      Clerk.mountWaitlist(waitlistDiv)
+    })
+  </script>
+  ```
+</CodeBlockTabs>
+
+### <code>unmount<wbr />Waitlist()</code>
+
+Unmount and run cleanup on an existing `<Waitlist />` component instance.
+
+```typescript
+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
+</Properties>
+
+#### `unmountWaitlist()` usage
+
+<CodeBlockTabs options={['NPM module', '<script>']}>
+  ```js {{ filename: 'main.js', mark: [17] }}
+  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)
+  ```
+
+  ```html {{ filename: 'index.html', mark: [24] }}
+  <!-- Add a <div id="waitlist"> element to your HTML -->
+  <div id="waitlist"></div>
+
+  <!-- Initialize Clerk with your
+  Clerk Publishable key and Frontend API URL -->
+  <script
+    async
+    crossorigin="anonymous"
+    data-clerk-publishable-key="{{pub_key}}"
+    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
+    type="text/javascript"
+  ></script>
+
+  <script>
+    window.addEventListener('load', async function () {
+      await Clerk.load()
+
+      const waitlistDiv = document.getElementById('waitlist')
+
+      Clerk.mountWaitlist(waitlistDiv)
+
+      // ...
+
+      Clerk.unmountWaitlist(waitlistDiv)
+    })
+  </script>
+  ```
+</CodeBlockTabs>
+
+### `openWaitlist()`
+
+Opens the `<Waitlist />` component as an overlay at the root of your HTML `body` element.
+
+```typescript
+function openWaitlist(props?: WaitlistProps): void
+```
+
+#### `openWaitlist()` params
+
+<Properties>
+  - `props?`
+  - [`WaitlistProps`](#properties)
+
+  The properties to pass to the `<Watilist />` component
+</Properties>
+
+#### `openWaitlist()` usage
+
+<CodeBlockTabs options={['NPM module', '<script>']}>
+  ```js {{ filename: 'main.js', mark: [13] }}
+  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)
+  ```
+
+  ```html {{ filename: 'index.html', mark: [20] }}
+  <!-- Add a <div id="waitlist"> element to your HTML -->
+  <div id="waitlist"></div>
+
+  <!-- Initialize Clerk with your
+  Clerk Publishable key and Frontend API URL -->
+  <script
+    async
+    crossorigin="anonymous"
+    data-clerk-publishable-key="{{pub_key}}"
+    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
+    type="text/javascript"
+  ></script>
+
+  <script>
+    window.addEventListener('load', async function () {
+      await Clerk.load()
+
+      const waitlistDiv = document.getElementById('waitlist')
+
+      Clerk.openWaitlist(waitlistDiv)
+    })
+  </script>
+  ```
+</CodeBlockTabs>
+
+### `closeWaitlist()`
+
+Closes the waitlist overlay.
+
+```typescript
+function closeWaitlist(): void
+```
+
+#### `closeWaitlist()` usage
+
+<CodeBlockTabs options={['NPM module', '<script>']}>
+  ```js {{ filename: 'main.js', mark: [17] }}
+  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)
+  ```
+
+  ```html {{ filename: 'index.html', mark: [24] }}
+  <!-- Add a <div id="waitlist"> element to your HTML -->
+  <div id="waitlist"></div>
+
+  <!-- Initialize Clerk with your
+  Clerk Publishable key and Frontend API URL -->
+  <script
+    async
+    crossorigin="anonymous"
+    data-clerk-publishable-key="{{pub_key}}"
+    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
+    type="text/javascript"
+  ></script>
+
+  <script>
+    window.addEventListener('load', async function () {
+      await Clerk.load()
+
+      const waitlistDiv = document.getElementById('waitlist')
+
+      Clerk.openWaitlist(waitlistDiv)
+
+      // ...
+
+      Clerk.closeWaitlist(waitlistDiv)
+    })
+  </script>
+  ```
+</CodeBlockTabs>
+
+## Customization
+
+To learn about how to customize Clerk components, see the [customization documentation](/docs/customization/overview).

docs/manifest.json

@@ -219,6 +219,18 @@
                 ]
               ]
             },
+            {
+              "title": "Waitlist Components",
+              "items": [
+                [
+                  {
+                    "title": "`<Waitlist />`",
+                    "wrap": false,
+                    "href": "/docs/components/waitlist/overview"
+                  }
+                ]
+              ]
+            },
             {
               "title": "Control Components",
               "items": [

docs/references/javascript/clerk/clerk.mdx

@@ -525,6 +525,13 @@ The `Clerk` class also contains a number of methods for interacting with Clerk's
 - [`mountOrganizationList`](/docs/components/organization/organization-list#mount-organization-list)
 - [`unmountOrganizationList`](/docs/components/organization/organization-list#unmount-organization-list)
 
+### `<Waitlist />`
+
+- [`mountWaitlist`](/docs/components/waitlist/overview#mount-waitlist)
+- [`unmountWaitlist`](/docs/components/waitlist/overview#unmount-waitlist)
+- [`openWaitlist`](/docs/components/waitlist/overview#open-waitlist)
+- [`closeWaitlist`](/docs/components/waitlist/overview#close-waitlist)
+
 ## Additional methods
 
 In addition to the methods listed above, the `Clerk` class also has the following methods: