Refresh customization docs (#2823)

Co-authored-by: Sarah Soutoul <[email protected]>
Co-authored-by: Alexis Aguilar <[email protected]>
Co-authored-by: Michael Novotny <[email protected]>

Author: 4 people

docs/_partials/authentication/passkeys-restriction.mdx

@@ -9,7 +9,7 @@ Passkeys are tied to the domain they are created on and **cannot be used across
 If you're **not** using satellite domains:
 
 - **In development**, you can either:
-  - **The recommended approach**. Use Clerk's [components](/docs/reference/components/overview), [Elements](/docs/guides/customizing-clerk/elements/overview), or [custom flows](!custom-flow), instead of the [Account Portal](/docs/guides/customizing-clerk/account-portal). This ensures the passkey is created and used entirely on your development domain, so passkeys created on `localhost` will only work on `localhost`.
+  - **The recommended approach**. Use Clerk's [components](/docs/reference/components/overview), [Elements](/docs/guides/customizing-clerk/elements/overview), or [custom flows](!custom-flow), instead of the [Account Portal](/docs/guides/account-portal/overview). This ensures the passkey is created and used entirely on your development domain, so passkeys created on `localhost` will only work on `localhost`.
   - Create a passkey directly through the Account Portal instead of your local application to keep it tied to the Account Portal's domain. Passkeys created on your Account Portal (e.g., `your-app.accounts.dev`) will only work on that domain, which can cause issues if you switch between `localhost` and the Account Portal during development. If you choose this approach, ensure all testing happens on the same domain where the passkey was created.
 
 - **In production,** your Account Portal is usually hosted on a subdomain of your main domain (e.g. `accounts.your-domain.com`), enabling passkeys to work seamlessly across your app. However, as stated above, if you use **satellite domains**, passkeys will not work as intended.

docs/_partials/authentication/social-connections/test-your-connection.mdx

@@ -1,4 +1,4 @@
-The simplest way to test your connection is to visit your Clerk app's [Account Portal](/docs/guides/customizing-clerk/account-portal), which is available for all Clerk apps out-of-the-box.
+The simplest way to test your connection is to visit your Clerk app's [Account Portal](/docs/guides/account-portal/overview), which is available for all Clerk apps out-of-the-box.
 
 1. In the Clerk Dashboard, navigate to the [**Account Portal**](https://dashboard.clerk.com/~/account-portal) page.
 1. Next to **Sign-in**, select the button to visit the sign-in page. The URL should resemble:

docs/_partials/clerk-provider/properties.mdx

@@ -228,9 +228,9 @@
   - `waitlistUrl`
   - `string`
 
-  The full URL or path to the waitlist page. If `undefined`, will redirect to the [Account Portal waitlist page](/docs/guides/customizing-clerk/account-portal#waitlist).
+  The full URL or path to the waitlist page. If `undefined`, will redirect to the [Account Portal waitlist page](/docs/guides/account-portal/overview#waitlist).
 </Properties>
 
 [components-ref]: /docs/reference/components/overview
 
-[ap-ref]: /docs/guides/customizing-clerk/account-portal
+[ap-ref]: /docs/guides/account-portal/overview

docs/_partials/custom-flows-callout.mdx

@@ -1,2 +1,2 @@
 > [!WARNING]
-> This guide is for users who want to build a [custom flow](!custom-flow). To use a _prebuilt_ UI, use the [Account Portal pages](/docs/guides/customizing-clerk/account-portal) or [prebuilt components](/docs/reference/components/overview).
+> This guide is for users who want to build a [custom flow](!custom-flow). To use a _prebuilt_ UI, use the [Account Portal pages](/docs/guides/account-portal/overview) or [prebuilt components](/docs/reference/components/overview).

docs/_partials/update-clerk-options-properties.mdx

@@ -14,4 +14,4 @@
 
 [components-ref]: /docs/reference/components/overview
 
-[ap-ref]: /docs/guides/customizing-clerk/account-portal
+[ap-ref]: /docs/guides/account-portal/overview

docs/getting-started/core-concepts.mdx

@@ -9,7 +9,7 @@ Before building your application, it's important to understand the core concepts
 
 Clerk provides three ways to integrate authentication into your application, depending on the level of control and customization you need:
 
-1. **[Account Portal](/docs/guides/customizing-clerk/account-portal) (default)**: Uses Clerk's prebuilt components on dedicated pages that are hosted on Clerk servers. Every Clerk application has this enabled by default, providing a complete user management interface out of the box.
+1. **[Account Portal](/docs/guides/account-portal/overview) (default)**: Uses Clerk's prebuilt components on dedicated pages that are hosted on Clerk servers. Every Clerk application has this enabled by default, providing a complete user management interface out of the box.
 1. **[Prebuilt components](/docs/reference/components/overview)**: All-in-one UI components that can be integrated into your application. They are fully customizable to match your application's branding and design. This is the recommended approach for most use cases.
 1. **[Custom flows](!custom-flow) using the Clerk API**: Build your own UI using the Clerk API. This option provides maximum flexibility and control over the user experience but requires more development effort.
 

docs/getting-started/quickstart.astro.mdx

@@ -103,7 +103,7 @@ sdk: astro
   - [`<SignedIn>`](/docs/reference/components/control/signed-in): Children of this component can only be seen while **signed in**.
   - [`<SignedOut>`](/docs/reference/components/control/signed-out): Children of this component can only be seen while **signed out**.
   - [`<UserButton />`](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
-  - [`<SignInButton />`](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in).
+  - [`<SignInButton />`](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/account-portal/overview#sign-in).
 
   ```astro {{ filename: 'src/layouts/Layout.astro', mark: [[1, 3], [15, 22]], fold: [[27, 34]] }}
   ---

docs/getting-started/quickstart.chrome-extension.mdx

@@ -112,7 +112,7 @@ sdk: chrome-extension
   - [`<SignedIn>`](/docs/reference/components/control/signed-in): Children of this component can only be seen while **signed in**.
   - [`<SignedOut>`](/docs/reference/components/control/signed-out): Children of this component can only be seen while **signed out**.
   - [`<UserButton />`](/docs/reference/components/user/user-button): A prebuilt component that comes styled out-of-the-box to show the avatar from the account the user is signed in with.
-  - [`<SignInButton />`](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. For this example, because you have not specified any props or [environment variables](/docs/guides/development/clerk-environment-variables) for the sign-in URL, the component will link to the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in).
+  - [`<SignInButton />`](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. For this example, because you have not specified any props or [environment variables](/docs/guides/development/clerk-environment-variables) for the sign-in URL, the component will link to the [Account Portal sign-in page](/docs/guides/account-portal/overview#sign-in).
 
   ```tsx {{ filename: 'src/popup.tsx', mark: [[1, 7], [22, 29]] }}
   import {

docs/getting-started/quickstart.nuxt.mdx

@@ -82,7 +82,7 @@ sdk: nuxt
   - [`<SignedIn>`](/docs/reference/components/control/signed-in): Children of this component can only be seen while **signed in**.
   - [`<SignedOut>`](/docs/reference/components/control/signed-out): Children of this component can only be seen while **signed out**.
   - [`<UserButton />`](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
-  - [`<SignInButton />`](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page or displays the sign-in modal. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in).
+  - [`<SignInButton />`](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page or displays the sign-in modal. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/account-portal/overview#sign-in).
 
   ```vue {{ filename: 'app/app.vue', mark: [2, [6, 13]] }}
   <script setup lang="ts">

docs/getting-started/quickstart.react-router.mdx

@@ -172,7 +172,7 @@ This tutorial assumes that you're using React Router **v7.1.2 or later** in fram
   - [`<SignedIn>`](/docs/reference/components/control/signed-in): Children of this component can only be seen while **signed in**.
   - [`<SignedOut>`](/docs/reference/components/control/signed-out): Children of this component can only be seen while **signed out**.
   - [`<UserButton />`](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
-  - [`<SignInButton />`](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in).
+  - [`<SignInButton />`](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/account-portal/overview#sign-in).
 
   ```tsx {{ filename: 'app/root.tsx', mark: [1, 44, [46, 60]], fold: [[2, 42], [62, 87]] }}
   import { ClerkProvider, SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/react-router'