Add <APIKeys /> component docs

docs/components/api-keys.mdx

@@ -0,0 +1,204 @@
+---
+title: '`<APIKeys />` component'
+description: Clerk's <APIKeys /> component for managing API keys.
+---
+
+The `<APIKeys />` component is used to manage API keys for your application. It allows you to create, edit, and revoke API keys for your application.
+
+The component manages API keys based on the user's current context. When the user has an active organization selected, all operations are scoped to that organization. Otherwise, operations are user-scoped.
+
+To utilize the `<APIKeys />` component, you must first enable API keys in the Clerk Dashboard.
+
+> [!WARNING]
+> The `<APIKeys />` component is currently in early preview. To use this component, you need to have your instance flagged for API keys. Contact Clerk support to enable this feature for your instance.
+
+## Properties
+
+All props are optional.
+
+<Properties>
+  - `type`
+  - `'api_key'`
+
+  The type of API key to filter by. Currently, only 'api\_key' is supported.
+
+  ---
+
+  - `perPage`
+  - `number`
+
+  The number of API keys to show per page. Defaults to 5.
+
+  ---
+
+  - `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/account-portal/overview) pages.
+
+  ---
+
+  - `fallback?`
+  - `ReactNode`
+
+  An optional element to be rendered while the component is mounting.
+</Properties>
+
+## Usage with frameworks
+
+The following example includes a basic implementation of the `<APIKeys />` component. You can use this as a starting point for your own implementation.
+
+<Tabs items={["Next.js", "React", "React Router", "TanStack React Start", "Vue"]}>
+  <Tab>
+    ```tsx {{ filename: 'app/api-keys/page.tsx' }}
+    import { APIKeys } from '@clerk/nextjs'
+
+    export default function Page() {
+      return <APIKeys />
+    }
+    ```
+  </Tab>
+
+  <Tab>
+    ```tsx {{ filename: 'src/api-keys.tsx' }}
+    import { APIKeys } from '@clerk/clerk-react'
+
+    export default function Page() {
+      return <APIKeys />
+    }
+    ```
+  </Tab>
+
+  <Tab>
+    ```tsx {{ filename: 'app/routes/api-keys.tsx' }}
+    import { APIKeys } from '@clerk/react-router'
+
+    export default function Page() {
+      return <APIKeys />
+    }
+    ```
+  </Tab>
+
+  <Tab>
+    ```tsx {{ filename: 'src/routes/api-keys.tsx' }}
+    import { APIKeys } from '@clerk/tanstack-react-start'
+    import { createFileRoute } from '@tanstack/react-router'
+
+    export const Route = createFileRoute('/api-keys')({
+      component: Page,
+    })
+
+    function Page() {
+      return <APIKeys />
+    }
+    ```
+  </Tab>
+
+  <Tab>
+    ```vue {{ filename: 'api-keys.vue' }}
+    <script setup lang="ts">
+    import { APIKeys } from '@clerk/vue'
+    </script>
+
+    <template>
+      <APIKeys />
+    </template>
+    ```
+  </Tab>
+</Tabs>
+
+<If sdk="js-frontend">
+  ## Usage with JavaScript
+
+  The following methods available on an instance of the [`Clerk`](/docs/references/javascript/clerk) class are used to render and control the `<APIKeys />` component:
+
+  - [`mountApiKeys()`](#mount-api-keys)
+  - [`unmountApiKeys()`](#unmount-api-keys)
+
+  The following examples assume that you followed the [quickstart](/docs/quickstarts/javascript) to add Clerk to your JavaScript app.
+
+  ### `mountApiKeys()`
+
+  ```typescript
+  function mountApiKeys(node: HTMLDivElement, props?: APIKeysProps): void
+  ```
+
+  #### `mountApiKeys()` params
+
+  <Properties>
+    - `node`
+    - [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
+
+    The container `<div>` element used to render in the `<APIKeys />` component
+
+    ---
+
+    - `props?`
+    - [`APIKeysProps`](#properties)
+
+    The properties to pass to the `<APIKeys />` component
+  </Properties>
+
+  #### `mountApiKeys()` usage
+
+  ```js {{ filename: 'main.js', mark: [15] }}
+  import { Clerk } from '@clerk/clerk-js'
+
+  // Initialize Clerk with your Clerk Publishable Key
+  const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+  const clerk = new Clerk(clerkPubKey)
+  await clerk.load()
+
+  document.getElementById('app').innerHTML = `
+    <div id="api-keys"></div>
+  `
+
+  const apiKeysDiv = document.getElementById('api-keys')
+
+  clerk.mountApiKeys(apiKeysDiv)
+  ```
+
+  ### `unmountApiKeys()`
+
+  ```typescript
+  function unmountApiKeys(node: HTMLDivElement): void
+  ```
+
+  #### `unmountApiKeys()` params
+
+  <Properties>
+    - `node`
+    - [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
+
+    The container `<div>` element with a rendered `<APIKeys />` component instance
+  </Properties>
+
+  #### `unmountApiKeys()` usage
+
+  ```js {{ filename: 'main.js', mark: [19] }}
+  import { Clerk } from '@clerk/clerk-js'
+
+  // Initialize Clerk with your Clerk Publishable Key
+  const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+  const clerk = new Clerk(clerkPubKey)
+  await clerk.load()
+
+  document.getElementById('app').innerHTML = `
+    <div id="api-keys"></div>
+  `
+
+  const apiKeysDiv = document.getElementById('api-keys')
+
+  clerk.mountApiKeys(apiKeysDiv)
+
+  // ...
+
+  clerk.unmountApiKeys(apiKeysDiv)
+  ```
+</If>
+
+## Customization
+
+To learn about how to customize Clerk components, see the [customization guide](/docs/customization/overview).

docs/manifest.json

@@ -955,6 +955,18 @@
                       ]
                     ]
                   },
+                  {
+                    "title": "API Keys Components",
+                    "items": [
+                      [
+                        {
+                          "title": "`<APIKeys />`",
+                          "wrap": false,
+                          "href": "/docs/components/api-keys"
+                        }
+                      ]
+                    ]
+                  },
                   {
                     "title": "Control Components",
                     "items": [