Add SDK specificity across the docs for the Customizing Clerk section

docs/_partials/customizing-clerk-info.mdx

@@ -0,0 +1 @@
+It is passed as a parameter to the [`appearance`](/docs/guides/customizing-clerk/appearance-prop/overview) prop, which is available wherever you initialize the Clerk integration. For most SDKs, this is done via the [`<ClerkProvider>`](/docs/reference/components/clerk-provider) component. For other SDKs, it's configured through the SDK's Clerk integration or plugin.

docs/_partials/nextjs/nextjs-app-router-preface.mdx

@@ -0,0 +1 @@
+This is written for Next.js App Router but can be adapted for any React-based SDK.

docs/guides/customizing-clerk/adding-items/organization-profile.mdx

@@ -50,9 +50,11 @@ To add a custom page to the `<OrganizationProfile />` component, use the `<Organ
 
 ### Example
 
-<Tabs items={["Next.js", "JavaScript", "Vue"]}>
+The following example demonstrates two ways that you can render content in a custom page: as a component or as a direct child.
+
+<Tabs items={["Next.js", "Astro", "JavaScript", "Vue"]}>
   <Tab>
-    The following example demonstrates two ways that you can render content in a custom page: as a component or as a direct child.
+    <Include src="_partials/nextjs/nextjs-app-router-preface" />
 
     <CodeBlockTabs options={["<OrganizationSwitcher />", "Dedicated page"]}>
       ```tsx {{ filename: 'app/components/Header.tsx' }}
@@ -151,6 +153,58 @@ To add a custom page to the `<OrganizationProfile />` component, use the `<Organ
     </CodeBlockTabs>
   </Tab>
 
+  <Tab>
+    <CodeBlockTabs options={["<OrganizationSwitcher />", "Dedicated page"]}>
+      ```astro {{ filename: 'pages/index.astro' }}
+      ---
+      import { OrganizationSwitcher } from '@clerk/astro/components'
+      ---
+
+      <header>
+        <OrganizationSwitcher>
+          <OrganizationSwitcher.OrganizationProfilePage label="Custom Page" url="custom">
+            <svg
+              slot="label-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
+              fill="currentColor"
+            >
+              <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"></path>
+            </svg>
+            <div>
+              <h1>Custom page</h1>
+              <p>This is the content of the custom page.</p>
+            </div>
+          </OrganizationSwitcher.OrganizationProfilePage>
+        </OrganizationSwitcher>
+      </header>
+      ```
+
+      ```astro {{ filename: 'pages/organization-profile.astro' }}
+      ---
+      import { OrganizationProfile } from '@clerk/astro/components'
+      ---
+
+      <OrganizationProfile>
+        <OrganizationProfile.Page label="Custom Page" url="custom">
+          <svg
+            slot="label-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 512 512"
+            fill="currentColor"
+          >
+            <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"></path>
+          </svg>
+          <div>
+            <h1>Custom page</h1>
+            <p>This is the content of the custom page.</p>
+          </div>
+        </OrganizationProfile.Page>
+      </OrganizationProfile>
+      ```
+    </CodeBlockTabs>
+  </Tab>
+
   <Tab>
     To add custom pages to the `<OrganizationProfile />` component using the [JavaScript SDK](/docs/reference/javascript/overview), pass the `customPages` property to the `mountOrganizationProfile()` or `openOrganizationProfile()` method, as shown in the following example:
 
@@ -288,8 +342,10 @@ To add an external link to the `<OrganizationProfile />` navigation sidenav, use
 
 The following example adds a custom link to the `<OrganizationProfile />` sidenav that navigates to the homepage.
 
-<Tabs items={["Next.js", "Vue"]}>
+<Tabs items={["Next.js", "Astro", "JavaScript", "Vue"]}>
   <Tab>
+    <Include src="_partials/nextjs/nextjs-app-router-preface" />
+
     <CodeBlockTabs options={["<OrganizationSwitcher />", "Dedicated page"]}>
       ```tsx {{ filename: 'app/components/Header.tsx' }}
       'use client'
@@ -343,6 +399,84 @@ The following example adds a custom link to the `<OrganizationProfile />` sidena
     </CodeBlockTabs>
   </Tab>
 
+  <Tab>
+    <CodeBlockTabs options={["<OrganizationSwitcher />", "Dedicated page"]}>
+      ```astro {{ filename: 'pages/index.astro' }}
+      ---
+      import { OrganizationSwitcher } from '@clerk/astro/components'
+      ---
+
+      <header>
+        <OrganizationSwitcher>
+          <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+            <svg
+              slot="label-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
+              fill="currentColor"
+            >
+              <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"></path>
+            </svg>
+          </OrganizationSwitcher.OrganizationProfileLink>
+        </OrganizationSwitcher>
+      </header>
+      ```
+
+      ```astro {{ filename: 'pages/organization-profile.astro' }}
+      ---
+      import { OrganizationProfile } from '@clerk/astro/components'
+      ---
+
+      <OrganizationProfile>
+        <OrganizationProfile.Link label="Homepage" url="/">
+          <svg
+            slot="label-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 512 512"
+            fill="currentColor"
+          >
+            <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"></path>
+          </svg>
+        </OrganizationProfile.Link>
+      </OrganizationProfile>
+      ```
+    </CodeBlockTabs>
+  </Tab>
+
+  <Tab>
+    To add custom pages to the `<OrganizationProfile />` component using the [JavaScript SDK](/docs/reference/javascript/overview), pass the `customPages` property to the `mountOrganizationProfile()` or `openOrganizationProfile()` method, as shown in the following example:
+
+    ```js {{ filename: 'main.js' }}
+    import { Clerk } from '@clerk/clerk-js'
+
+    const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+    const clerk = new Clerk(pubKey)
+    await clerk.load()
+
+    document.getElementById('app').innerHTML = `
+      <div id="organization-profile"></div>
+    `
+
+    const orgProfileDiv = document.getElementById('organization-profile')
+
+    clerk.openOrganizationProfile(orgProfileDiv, {
+      customPages: [
+        {
+          url: '/',
+          label: 'Homepage',
+          mountIcon: (el) => {
+            el.innerHTML = '🌐'
+          },
+          unmountIcon: (el) => {
+            el.innerHTML = ''
+          },
+        },
+      ],
+    })
+    ```
+  </Tab>
+
   <Tab>
     <CodeBlockTabs options={["<OrganizationSwitcher />", "Dedicated page"]}>
       ```vue {{ filename: 'App.vue' }}
@@ -394,8 +528,10 @@ Note that when reordering default routes, the first item in the navigation siden
 
 The following example adds a custom page as the first item in the sidenav, followed by a custom link to the homepage, and then the default members and general pages.
 
-<Tabs items={["Next.js", "Vue"]}>
+<Tabs items={["Next.js", "Astro", "Vue"]}>
   <Tab>
+    <Include src="_partials/nextjs/nextjs-app-router-preface" />
+
     <CodeBlockTabs options={["<OrganizationSwitcher />", "Dedicated Page"]}>
       ```tsx {{ filename: 'app/components/Header.tsx' }}
       'use client'
@@ -481,6 +617,82 @@ The following example adds a custom page as the first item in the sidenav, follo
     </CodeBlockTabs>
   </Tab>
 
+  <Tab>
+    <CodeBlockTabs options={["<OrganizationSwitcher />", "Dedicated page"]}>
+      ```astro {{ filename: 'pages/index.astro' }}
+      ---
+      import { OrganizationSwitcher } from '@clerk/astro/components'
+      ---
+
+      <header>
+        <OrganizationSwitcher>
+          <OrganizationSwitcher.OrganizationProfilePage label="Custom Page" url="custom">
+            <svg
+              slot="label-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
+              fill="currentColor"
+            >
+              <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"></path>
+            </svg>
+            <div>
+              <h1>Custom page</h1>
+              <p>This is the content of the custom page.</p>
+            </div>
+          </OrganizationSwitcher.OrganizationProfilePage>
+          <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+            <svg
+              slot="label-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
+              fill="currentColor"
+            >
+              <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"></path>
+            </svg>
+          </OrganizationSwitcher.OrganizationProfileLink>
+          <OrganizationSwitcher.OrganizationProfilePage label="members" />
+          <OrganizationSwitcher.OrganizationProfilePage label="general" />
+        </OrganizationSwitcher>
+      </header>
+      ```
+
+      ```astro {{ filename: 'pages/organization-profile.astro' }}
+      ---
+      import { OrganizationProfile } from '@clerk/astro/components'
+      ---
+
+      <OrganizationProfile>
+        <OrganizationProfile.Page label="Custom Page" url="custom">
+          <svg
+            slot="label-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 512 512"
+            fill="currentColor"
+          >
+            <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"></path>
+          </svg>
+          <div>
+            <h1>Custom page</h1>
+            <p>This is the content of the custom page.</p>
+          </div>
+        </OrganizationProfile.Page>
+        <OrganizationProfile.Link label="Homepage" url="/">
+          <svg
+            slot="label-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 512 512"
+            fill="currentColor"
+          >
+            <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"></path>
+          </svg>
+        </OrganizationProfile.Link>
+        <OrganizationProfile.Page label="members" />
+        <OrganizationProfile.Page label="general" />
+      </OrganizationProfile>
+      ```
+    </CodeBlockTabs>
+  </Tab>
+
   <Tab>
     <CodeBlockTabs options={["<OrganizationSwitcher />", "Dedicated page"]}>
       ```vue {{ filename: 'App.vue' }}

docs/guides/customizing-clerk/adding-items/user-button.mdx

@@ -56,6 +56,8 @@ The following example adds an "Open chat" action to the `<UserButton />` compone
 
 <Tabs items={["Next.js", "Astro", "JavaScript", "Vue"]}>
   <Tab>
+    <Include src="_partials/nextjs/nextjs-app-router-preface" />
+
     ```tsx {{ filename: '/app/page.tsx' }}
     'use client'
 
@@ -203,8 +205,10 @@ The following example adds an "Open chat" action to the `<UserButton />` compone
 
 The following example adds an "Open chat" action to the `<UserButton />` component, as well as a [custom page](/docs/guides/customizing-clerk/adding-items/user-profile) titled "Help". When a user selects the `<UserButton />`, there will be "Open chat" and "Help" menu items.
 
-<Tabs items={["Next.js", "Astro", "Vue"]}>
+<Tabs items={["Next.js", "Astro", "JavaScript", "Vue"]}>
   <Tab>
+    <Include src="_partials/nextjs/nextjs-app-router-preface" />
+
     ```tsx {{ filename: '/app/page.tsx' }}
     'use client'
 
@@ -283,6 +287,61 @@ The following example adds an "Open chat" action to the `<UserButton />` compone
     ```
   </Tab>
 
+  <Tab>
+    To add custom pages to the `<UserProfile />` component using the [JavaScript SDK](/docs/reference/javascript/overview), pass the `customPages` property to the `mountUserProfile()` method, as shown in the following example:
+
+    ```js {{ filename: 'main.js' }}
+    import { Clerk } from '@clerk/clerk-js'
+
+    const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+    const clerk = new Clerk(pubKey)
+    await clerk.load()
+
+    document.getElementById('app').innerHTML = `
+      <div id="user-profile"></div>
+    `
+
+    const userProfileDiv = document.getElementById('user-profile')
+
+    clerk.mountUserProfile(userProfileDiv, {
+      customMenuItems: [
+        {
+          label: 'Help modal',
+          onClick: () => {
+            alert('Open modal') // your custom event
+          },
+          mountIcon: (el) => {
+            el.innerHTML = '👤'
+          },
+          unmountIcon: (el) => {},
+        },
+      ],
+      customPages: [
+        {
+          url: '/help',
+          label: 'Help',
+          mountIcon: (el) => {
+            el.innerHTML = '👤'
+          },
+          unmountIcon: (el) => {
+            el.innerHTML = ''
+          },
+          mount: (el) => {
+            el.innerHTML = `
+              <h1>Help Page</h1>
+              <p>This is the custom help page</p>
+              `
+          },
+          unmount: (el) => {
+            el.innerHTML = ''
+          },
+        },
+      ],
+    })
+    ```
+  </Tab>
+
   <Tab>
     ```vue {{ filename: 'App.vue' }}
     <script setup lang="ts">
@@ -355,6 +414,8 @@ The following example adds a "Create organization" link to the `<UserButton />`
 
 <Tabs items={["Next.js", "Astro", "JavaScript", "Vue"]}>
   <Tab>
+    <Include src="_partials/nextjs/nextjs-app-router-preface" />
+
     ```tsx {{ filename: '/app/page.tsx' }}
     'use client'
 
@@ -475,6 +536,8 @@ In the following example, the "Sign out" menu item is moved to the top of the me
 
 <Tabs items={["Next.js", "Astro", "Vue"]}>
   <Tab>
+    <Include src="_partials/nextjs/nextjs-app-router-preface" />
+
     ```tsx {{ filename: '/app/page.tsx' }}
     'use client'
 
@@ -570,6 +633,8 @@ In the following example, the "Create organization" menu item will only render i
 
 <Tabs items={["Next.js", "Astro", "Vue"]}>
   <Tab>
+    <Include src="_partials/nextjs/nextjs-app-router-preface" />
+
     ```tsx {{ filename: '/app/page.tsx' }}
     'use client'