From 8225f3c7e67c7600caf78253c7821868a1707c0d Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Tue, 30 Sep 2025 15:23:23 -0600
Subject: [PATCH 01/32] Initial setup

---
 docs/reference/hooks/use-auth.mdx    | 86 ++++++++++++++++++++++++++++
 docs/reference/hooks/use-sign-in.mdx | 46 +++++++++++++++
 2 files changed, 132 insertions(+)

diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index c3a88e0313..93835fa0e9 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -5,3 +5,89 @@ sdk: astro, chrome-extension, expo, nextjs, react, react-router, remix, tanstack
 ---
 
 <Typedoc src="clerk-react/use-auth" />
+
+## Example
+
+The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource.
+
+<If sdk="react">
+    ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
+  import { useAuth } from '@clerk/clerk-react'
+ 
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+ 
+    const fetchExternalData = async () => {
+      const token = await getToken()
+ 
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+ 
+      return response.json()
+    }
+ 
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+ 
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+ 
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+    ```tsx {{ filename: 'app/external-data/page.tsx' }}
+    'use client';
+
+    import { useAuth } from '@clerk/nextjs';
+
+    export default function ExternalDataPage() {
+        const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth();
+
+        const fetchExternalData = async () => {
+            const token = await getToken();
+
+            // Fetch data from an external API
+            const response = await fetch('https://api.example.com/data', {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+            });
+
+            return response.json();
+        };
+
+        if (!isLoaded) {
+            return <div>Loading...</div>;
+        }
+
+        if (!isSignedIn) {
+            return <div>Sign in to view this page</div>;
+        }
+
+        return (
+            <div>
+            <p>
+                Hello, {userId}! Your current active session is {sessionId}.
+            </p>
+            <button onClick={fetchExternalData}>Fetch Data</button>
+            </div>
+        );
+    }
+    ```
+</If>
\ No newline at end of file
diff --git a/docs/reference/hooks/use-sign-in.mdx b/docs/reference/hooks/use-sign-in.mdx
index bddec03f46..dc1d3cbeae 100644
--- a/docs/reference/hooks/use-sign-in.mdx
+++ b/docs/reference/hooks/use-sign-in.mdx
@@ -5,3 +5,49 @@ sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-
 ---
 
 <Typedoc src="clerk-react/use-sign-in" />
+
+## Examples
+
+### Check the current state of a sign-in
+
+The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs/reference/javascript/sign-in) object, which contains the current sign-in attempt status and methods to create a new sign-in attempt. The `isLoaded` property is used to handle the loading state.
+
+<If sdk="react">
+     ```tsx {{ filename: 'src/pages/SignInPage.tsx' }}
+  import { useSignIn } from '@clerk/clerk-react'
+ 
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+ 
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+ 
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+    ```tsx {{ filename: 'app/sign-in/page.tsx' }}
+        'use client';
+
+        import { useSignIn } from '@clerk/nextjs';
+
+        export default function SignInPage() {
+        const { isLoaded, signIn } = useSignIn();
+
+        if (!isLoaded) {
+            // Handle loading state
+            return null;
+        }
+
+        return <div>The current sign-in attempt status is {signIn?.status}.</div>;
+        }
+    ``` 
+</If>
+
+### Create a custom sign-in flow with `useSignIn()`
+
+The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).
\ No newline at end of file

From 2ba89b45d463c11ea2b8d28855070c85683ab854 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Tue, 30 Sep 2025 16:18:54 -0600
Subject: [PATCH 02/32] Fix linting

---
 docs/reference/hooks/use-auth.mdx    | 94 ++++++++++++++--------------
 docs/reference/hooks/use-sign-in.mdx | 34 +++++-----
 2 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index 93835fa0e9..cb1bc16387 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -11,33 +11,33 @@ sdk: astro, chrome-extension, expo, nextjs, react, react-router, remix, tanstack
 The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource.
 
 <If sdk="react">
-    ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
+  ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
   import { useAuth } from '@clerk/clerk-react'
- 
+
   export default function ExternalDataPage() {
     const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
- 
+
     const fetchExternalData = async () => {
       const token = await getToken()
- 
+
       // Fetch data from an external API
       const response = await fetch('https://api.example.com/data', {
         headers: {
           Authorization: `Bearer ${token}`,
         },
       })
- 
+
       return response.json()
     }
- 
+
     if (!isLoaded) {
       return <div>Loading...</div>
     }
- 
+
     if (!isSignedIn) {
       return <div>Sign in to view this page</div>
     }
- 
+
     return (
       <div>
         <p>
@@ -51,43 +51,43 @@ The following example demonstrates how to use the `useAuth()` hook to access the
 </If>
 
 <If sdk="nextjs">
-    ```tsx {{ filename: 'app/external-data/page.tsx' }}
-    'use client';
-
-    import { useAuth } from '@clerk/nextjs';
-
-    export default function ExternalDataPage() {
-        const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth();
-
-        const fetchExternalData = async () => {
-            const token = await getToken();
-
-            // Fetch data from an external API
-            const response = await fetch('https://api.example.com/data', {
-            headers: {
-                Authorization: `Bearer ${token}`,
-            },
-            });
-
-            return response.json();
-        };
-
-        if (!isLoaded) {
-            return <div>Loading...</div>;
-        }
-
-        if (!isSignedIn) {
-            return <div>Sign in to view this page</div>;
-        }
-
-        return (
-            <div>
-            <p>
-                Hello, {userId}! Your current active session is {sessionId}.
-            </p>
-            <button onClick={fetchExternalData}>Fetch Data</button>
-            </div>
-        );
+  ```tsx {{ filename: 'app/external-data/page.tsx' }}
+  'use client'
+
+  import { useAuth } from '@clerk/nextjs'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
     }
-    ```
-</If>
\ No newline at end of file
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-sign-in.mdx b/docs/reference/hooks/use-sign-in.mdx
index dc1d3cbeae..5208ad6dcc 100644
--- a/docs/reference/hooks/use-sign-in.mdx
+++ b/docs/reference/hooks/use-sign-in.mdx
@@ -13,41 +13,41 @@ sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-
 The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs/reference/javascript/sign-in) object, which contains the current sign-in attempt status and methods to create a new sign-in attempt. The `isLoaded` property is used to handle the loading state.
 
 <If sdk="react">
-     ```tsx {{ filename: 'src/pages/SignInPage.tsx' }}
+  ```tsx {{ filename: 'src/pages/SignInPage.tsx' }}
   import { useSignIn } from '@clerk/clerk-react'
- 
+
   export default function SignInPage() {
     const { isLoaded, signIn } = useSignIn()
- 
+
     if (!isLoaded) {
       // Handle loading state
       return null
     }
- 
+
     return <div>The current sign-in attempt status is {signIn?.status}.</div>
   }
   ```
 </If>
 
 <If sdk="nextjs">
-    ```tsx {{ filename: 'app/sign-in/page.tsx' }}
-        'use client';
+  ```tsx {{ filename: 'app/sign-in/page.tsx' }}
+  'use client'
 
-        import { useSignIn } from '@clerk/nextjs';
+  import { useSignIn } from '@clerk/nextjs'
 
-        export default function SignInPage() {
-        const { isLoaded, signIn } = useSignIn();
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
 
-        if (!isLoaded) {
-            // Handle loading state
-            return null;
-        }
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
 
-        return <div>The current sign-in attempt status is {signIn?.status}.</div>;
-        }
-    ``` 
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
 </If>
 
 ### Create a custom sign-in flow with `useSignIn()`
 
-The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).
\ No newline at end of file
+The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).

From f3aad9167a178f2dbfc911925c1032f829ba4e79 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Wed, 1 Oct 2025 12:29:07 -0600
Subject: [PATCH 03/32] More testing

---
 docs/reference/hooks/use-auth.mdx           |  21 +++
 docs/reference/hooks/use-reverification.mdx |  48 +----
 docs/reference/hooks/use-session.mdx        | 199 +++++++++++++++++++-
 3 files changed, 223 insertions(+), 45 deletions(-)

diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index cb1bc16387..4945059e56 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -4,12 +4,24 @@ description: Access and manage authentication state in your application with Cle
 sdk: astro, chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
 ---
 
+<<<<<<< Updated upstream
 <Typedoc src="clerk-react/use-auth" />
+=======
+The `useAuth()` hook provides access to the current user's authentication state and methods to manage the active session.
+
+> [!NOTE]
+> To access auth data server-side, see the [`Auth` object reference doc](/docs/reference/backend/types/auth-object).
+
+<If sdk="nextjs">
+ By default, Next.js opts all routes into static rendering. If you need to opt a route or routes into dynamic rendering because you need to access the authentication data at request time, you can create a boundary by passing the `dynamic` prop to `<ClerkProvider>`. See the [guide on rendering modes](/docs/guides/development/rendering-modes) for more information, including code examples.
+</If>
+>>>>>>> Stashed changes
 
 ## Example
 
 The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource.
 
+<<<<<<< Updated upstream
 <If sdk="react">
   ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
   import { useAuth } from '@clerk/clerk-react'
@@ -91,3 +103,12 @@ The following example demonstrates how to use the `useAuth()` hook to access the
   }
   ```
 </If>
+=======
+## Returns
+
+<Typedoc src="types/use-auth-return" />
+
+## Parameters
+
+{/* <Typedoc src="clerk-react/use-auth-options" /> */}
+>>>>>>> Stashed changes
diff --git a/docs/reference/hooks/use-reverification.mdx b/docs/reference/hooks/use-reverification.mdx
index 7f72bae3c2..1e44e87857 100644
--- a/docs/reference/hooks/use-reverification.mdx
+++ b/docs/reference/hooks/use-reverification.mdx
@@ -14,59 +14,19 @@ When using reverification, a user's credentials are valid for 10 minutes. Once s
 
 ## Parameters
 
-<Properties>
-  - `fetcher`
-  - `Fetcher extends (...args: any[]) => Promise<any>`
-
-  A function that returns a promise.
-
-  ---
-
-  - `options?`
-  - [`UseReverificationOptions`](#use-reverification-options)
-
-  The optional options object.
-</Properties>
+<Typedoc src="shared/use-reverification-1" />
 
 ### `UseReverificationOptions`
 
-<Properties>
-  - `onNeedsReverification?`
-  - <code>(\{ complete, cancel, level }: [NeedsReverificationParameters](#needs-reverification-parameters)) => void</code>
-
-  Handler for the reverification process. Opts out of using the default UI. Use this to build a custom UI.
-</Properties>
+<Typedoc src="shared/use-reverification-options" />
 
 ### `NeedsReverificationParameters`
 
-<Properties>
-  - `complete`
-  - `() => void`
-
-  Marks the reverification process as complete and retries the original request.
-
-  ---
-
-  - `cancel`
-  - `() => void`
-
-  Marks the reverification process as cancelled and rejects the original request.
-
-  ---
-
-  - `level`
-  - `"first_factor" | "second_factor" | "multi_factor" | undefined`
-
-  The verification level required for the reverification process.
-</Properties>
+<Typedoc src="shared/needs-reverification-parameters" />
 
 ## Returns
 
-<Properties>
-  - `(...args: any[]) => Promise<any>`
-
-  The action returns the response from the fetcher function.
-</Properties>
+<Typedoc src="shared/use-reverification-result" />
 
 ## Examples
 
diff --git a/docs/reference/hooks/use-session.mdx b/docs/reference/hooks/use-session.mdx
index 93af5b99cc..750ba49756 100644
--- a/docs/reference/hooks/use-session.mdx
+++ b/docs/reference/hooks/use-session.mdx
@@ -4,4 +4,201 @@ description: Access and manage the current user's session in your React applicat
 sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
 ---
 
-<Typedoc src="clerk-react/use-session" />
+The `useSession()` hook provides access to the current user's [`Session`](https://clerk.com/docs/reference/javascript/session) object, as well as helpers for setting the active session.
+
+## Returns
+
+<Typedoc src="types/use-session-return" />
+
+## Example
+
+### Access the `Session` object
+
+The following example uses the `useSession()` hook to access the `Session` object, which has the `lastActiveAt` property. The `lastActiveAt` property is a `Date` object used to show the time the session was last active.
+
+<If sdk="react">
+    ```tsx {{ filename: 'src/Home.tsx' }}
+  import { useSession } from '@clerk/clerk-react'
+ 
+  export default function Home() {
+    const { isLoaded, session, isSignedIn } = useSession()
+ 
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
+ 
+    return (
+      <div>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs"> 
+```tsx {{ filename: 'app/page.tsx' }}
+'use client';
+
+import { useSession } from '@clerk/nextjs';
+
+export default function HomePage() {
+  const { isLoaded, session, isSignedIn } = useSession();
+
+  if (!isLoaded) {
+    // Handle loading state
+    return null;
+  }
+  if (!isSignedIn) {
+    // Handle signed out state
+    return null;
+  }
+
+  return (
+    <div>
+      <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+    </div>
+  );
+}
+```
+</If>
+
+<If sdk="chrome-extension"> 
+```tsx {{ filename: 'app/page.tsx' }}
+'use client';
+
+import { useSession } from '@clerk/nextjs';
+
+export default function HomePage() {
+  const { isLoaded, session, isSignedIn } = useSession();
+
+  if (!isLoaded) {
+    // Handle loading state
+    return null;
+  }
+  if (!isSignedIn) {
+    // Handle signed out state
+    return null;
+  }
+
+  return (
+    <div>
+      <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+    </div>
+  );
+}
+```
+</If>
+
+<If sdk="expo"> 
+```tsx {{ filename: 'app/page.tsx' }}
+'use client';
+
+import { useSession } from '@clerk/nextjs';
+
+export default function HomePage() {
+  const { isLoaded, session, isSignedIn } = useSession();
+
+  if (!isLoaded) {
+    // Handle loading state
+    return null;
+  }
+  if (!isSignedIn) {
+    // Handle signed out state
+    return null;
+  }
+
+  return (
+    <div>
+      <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+    </div>
+  );
+}
+```
+</If>
+
+<If sdk="react-router"> 
+```tsx {{ filename: 'app/page.tsx' }}
+'use client';
+
+import { useSession } from '@clerk/nextjs';
+
+export default function HomePage() {
+  const { isLoaded, session, isSignedIn } = useSession();
+
+  if (!isLoaded) {
+    // Handle loading state
+    return null;
+  }
+  if (!isSignedIn) {
+    // Handle signed out state
+    return null;
+  }
+
+  return (
+    <div>
+      <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+    </div>
+  );
+}
+```
+</If>
+
+<If sdk="remix"> 
+```tsx {{ filename: 'app/page.tsx' }}
+'use client';
+
+import { useSession } from '@clerk/nextjs';
+
+export default function HomePage() {
+  const { isLoaded, session, isSignedIn } = useSession();
+
+  if (!isLoaded) {
+    // Handle loading state
+    return null;
+  }
+  if (!isSignedIn) {
+    // Handle signed out state
+    return null;
+  }
+
+  return (
+    <div>
+      <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+    </div>
+  );
+}
+```
+</If>
+
+<If sdk="tanstack-react-start"> 
+```tsx {{ filename: 'app/page.tsx' }}
+'use client';
+
+import { useSession } from '@clerk/nextjs';
+
+export default function HomePage() {
+  const { isLoaded, session, isSignedIn } = useSession();
+
+  if (!isLoaded) {
+    // Handle loading state
+    return null;
+  }
+  if (!isSignedIn) {
+    // Handle signed out state
+    return null;
+  }
+
+  return (
+    <div>
+      <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+    </div>
+  );
+}
+```
+</If>

From f39f98223bf357148480f2a49870cdd17da639b0 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Wed, 1 Oct 2025 14:01:02 -0600
Subject: [PATCH 04/32] Add other hooks

---
 docs/reference/hooks/use-auth.mdx    |  92 +--------
 docs/reference/hooks/use-session.mdx | 268 ++++++++++++++-------------
 docs/reference/hooks/use-sign-in.mdx |   6 +-
 docs/reference/hooks/use-sign-up.mdx |  52 +++++-
 docs/reference/hooks/use-user.mdx    | 211 ++++++++++++++++++++-
 5 files changed, 405 insertions(+), 224 deletions(-)

diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index 4945059e56..951a345bbd 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -4,111 +4,23 @@ description: Access and manage authentication state in your application with Cle
 sdk: astro, chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
 ---
 
-<<<<<<< Updated upstream
-<Typedoc src="clerk-react/use-auth" />
-=======
 The `useAuth()` hook provides access to the current user's authentication state and methods to manage the active session.
 
 > [!NOTE]
 > To access auth data server-side, see the [`Auth` object reference doc](/docs/reference/backend/types/auth-object).
 
 <If sdk="nextjs">
- By default, Next.js opts all routes into static rendering. If you need to opt a route or routes into dynamic rendering because you need to access the authentication data at request time, you can create a boundary by passing the `dynamic` prop to `<ClerkProvider>`. See the [guide on rendering modes](/docs/guides/development/rendering-modes) for more information, including code examples.
+  By default, Next.js opts all routes into static rendering. If you need to opt a route or routes into dynamic rendering because you need to access the authentication data at request time, you can create a boundary by passing the `dynamic` prop to `<ClerkProvider>`. See the [guide on rendering modes](/docs/guides/development/rendering-modes) for more information, including code examples.
 </If>
->>>>>>> Stashed changes
 
 ## Example
 
 The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource.
 
-<<<<<<< Updated upstream
-<If sdk="react">
-  ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
-  import { useAuth } from '@clerk/clerk-react'
-
-  export default function ExternalDataPage() {
-    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
-
-    const fetchExternalData = async () => {
-      const token = await getToken()
-
-      // Fetch data from an external API
-      const response = await fetch('https://api.example.com/data', {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      })
-
-      return response.json()
-    }
-
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
-
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
-
-    return (
-      <div>
-        <p>
-          Hello, {userId}! Your current active session is {sessionId}.
-        </p>
-        <button onClick={fetchExternalData}>Fetch Data</button>
-      </div>
-    )
-  }
-  ```
-</If>
-
-<If sdk="nextjs">
-  ```tsx {{ filename: 'app/external-data/page.tsx' }}
-  'use client'
-
-  import { useAuth } from '@clerk/nextjs'
-
-  export default function ExternalDataPage() {
-    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
-
-    const fetchExternalData = async () => {
-      const token = await getToken()
-
-      // Fetch data from an external API
-      const response = await fetch('https://api.example.com/data', {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      })
-
-      return response.json()
-    }
-
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
-
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
-
-    return (
-      <div>
-        <p>
-          Hello, {userId}! Your current active session is {sessionId}.
-        </p>
-        <button onClick={fetchExternalData}>Fetch Data</button>
-      </div>
-    )
-  }
-  ```
-</If>
-=======
 ## Returns
 
 <Typedoc src="types/use-auth-return" />
 
 ## Parameters
 
-{/* <Typedoc src="clerk-react/use-auth-options" /> */}
->>>>>>> Stashed changes
+<Typedoc src="clerk-react/use-auth-options" />
diff --git a/docs/reference/hooks/use-session.mdx b/docs/reference/hooks/use-session.mdx
index 750ba49756..2fe285da83 100644
--- a/docs/reference/hooks/use-session.mdx
+++ b/docs/reference/hooks/use-session.mdx
@@ -4,7 +4,7 @@ description: Access and manage the current user's session in your React applicat
 sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
 ---
 
-The `useSession()` hook provides access to the current user's [`Session`](https://clerk.com/docs/reference/javascript/session) object, as well as helpers for setting the active session.
+The `useSession()` hook provides access to the current user's [`Session`](/docs/reference/javascript/session) object, as well as helpers for setting the active session.
 
 ## Returns
 
@@ -17,12 +17,12 @@ The `useSession()` hook provides access to the current user's [`Session`](https:
 The following example uses the `useSession()` hook to access the `Session` object, which has the `lastActiveAt` property. The `lastActiveAt` property is a `Date` object used to show the time the session was last active.
 
 <If sdk="react">
-    ```tsx {{ filename: 'src/Home.tsx' }}
+  ```tsx {{ filename: 'src/Home.tsx' }}
   import { useSession } from '@clerk/clerk-react'
- 
+
   export default function Home() {
     const { isLoaded, session, isSignedIn } = useSession()
- 
+
     if (!isLoaded) {
       // Handle loading state
       return null
@@ -31,7 +31,7 @@ The following example uses the `useSession()` hook to access the `Session` objec
       // Handle signed out state
       return null
     }
- 
+
     return (
       <div>
         <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
@@ -41,164 +41,170 @@ The following example uses the `useSession()` hook to access the `Session` objec
   ```
 </If>
 
-<If sdk="nextjs"> 
-```tsx {{ filename: 'app/page.tsx' }}
-'use client';
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/page.tsx' }}
+  'use client'
 
-import { useSession } from '@clerk/nextjs';
+  import { useSession } from '@clerk/nextjs'
 
-export default function HomePage() {
-  const { isLoaded, session, isSignedIn } = useSession();
+  export default function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
 
-  if (!isLoaded) {
-    // Handle loading state
-    return null;
-  }
-  if (!isSignedIn) {
-    // Handle signed out state
-    return null;
-  }
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
 
-  return (
-    <div>
-      <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
-    </div>
-  );
-}
-```
+    return (
+      <div>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
 </If>
 
-<If sdk="chrome-extension"> 
-```tsx {{ filename: 'app/page.tsx' }}
-'use client';
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  'use client'
 
-import { useSession } from '@clerk/nextjs';
+  import { useSession } from '@clerk/react-router'
 
-export default function HomePage() {
-  const { isLoaded, session, isSignedIn } = useSession();
+  export default function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
 
-  if (!isLoaded) {
-    // Handle loading state
-    return null;
-  }
-  if (!isSignedIn) {
-    // Handle signed out state
-    return null;
-  }
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
 
-  return (
-    <div>
-      <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
-    </div>
-  );
-}
-```
+    return (
+      <div>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
 </If>
 
-<If sdk="expo"> 
-```tsx {{ filename: 'app/page.tsx' }}
-'use client';
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  'use client'
 
-import { useSession } from '@clerk/nextjs';
+  import { useSession } from '@clerk/chrome-extension'
 
-export default function HomePage() {
-  const { isLoaded, session, isSignedIn } = useSession();
+  export default function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
 
-  if (!isLoaded) {
-    // Handle loading state
-    return null;
-  }
-  if (!isSignedIn) {
-    // Handle signed out state
-    return null;
-  }
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
 
-  return (
-    <div>
-      <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
-    </div>
-  );
-}
-```
+    return (
+      <div>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
 </If>
 
-<If sdk="react-router"> 
-```tsx {{ filename: 'app/page.tsx' }}
-'use client';
+<If sdk="remix">
+  ```tsx {{ filename: 'app/page.tsx' }}
+  'use client'
 
-import { useSession } from '@clerk/nextjs';
+  import { useSession } from '@clerk/remix'
 
-export default function HomePage() {
-  const { isLoaded, session, isSignedIn } = useSession();
+  export default function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
 
-  if (!isLoaded) {
-    // Handle loading state
-    return null;
-  }
-  if (!isSignedIn) {
-    // Handle signed out state
-    return null;
-  }
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
 
-  return (
-    <div>
-      <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
-    </div>
-  );
-}
-```
+    return (
+      <div>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
 </If>
 
-<If sdk="remix"> 
-```tsx {{ filename: 'app/page.tsx' }}
-'use client';
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/page.tsx' }}
+  'use client'
 
-import { useSession } from '@clerk/nextjs';
+  import { useSession } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
 
-export default function HomePage() {
-  const { isLoaded, session, isSignedIn } = useSession();
+  export const Route = createFileRoute('/')({
+    component: HomePage,
+  })
 
-  if (!isLoaded) {
-    // Handle loading state
-    return null;
-  }
-  if (!isSignedIn) {
-    // Handle signed out state
-    return null;
-  }
+  function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
 
-  return (
-    <div>
-      <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
-    </div>
-  );
-}
-```
+    return (
+      <div>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
 </If>
 
-<If sdk="tanstack-react-start"> 
-```tsx {{ filename: 'app/page.tsx' }}
-'use client';
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  'use client'
 
-import { useSession } from '@clerk/nextjs';
+  import { useSession } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
 
-export default function HomePage() {
-  const { isLoaded, session, isSignedIn } = useSession();
+  export function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
 
-  if (!isLoaded) {
-    // Handle loading state
-    return null;
-  }
-  if (!isSignedIn) {
-    // Handle signed out state
-    return null;
-  }
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
 
-  return (
-    <div>
-      <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
-    </div>
-  );
-}
-```
+    return (
+      <View>
+        <Text>This session has been active since {session.lastActiveAt.toLocaleString()}</Text>
+      </View>
+    )
+  }
+  ```
 </If>
diff --git a/docs/reference/hooks/use-sign-in.mdx b/docs/reference/hooks/use-sign-in.mdx
index 5208ad6dcc..e9ad569e98 100644
--- a/docs/reference/hooks/use-sign-in.mdx
+++ b/docs/reference/hooks/use-sign-in.mdx
@@ -4,7 +4,11 @@ description: Access and manage the current user's sign-in state in your React ap
 sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
 ---
 
-<Typedoc src="clerk-react/use-sign-in" />
+The `useSignIn()` hook provides access to the [`SignIn`](/docs/reference/javascript/sign-in) object, which allows you to check the current state of a sign-in attempt and manage the sign-in flow. You can use this to create a [custom sign-in flow](/docs/guides/development/custom-flows/overview#sign-in-flow).
+
+## Returns
+
+<Typedoc src="types/use-sign-in-return" />
 
 ## Examples
 
diff --git a/docs/reference/hooks/use-sign-up.mdx b/docs/reference/hooks/use-sign-up.mdx
index e9d38edece..ff5f055df1 100644
--- a/docs/reference/hooks/use-sign-up.mdx
+++ b/docs/reference/hooks/use-sign-up.mdx
@@ -4,4 +4,54 @@ description: Access and manage the current user's sign-up state in your React ap
 sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
 ---
 
-<Typedoc src="clerk-react/use-sign-up" />
+The `useSignUp()` hook provides access to the [`SignUp`](/docs/reference/javascript/sign-up) object, which allows you to check the current state of a sign-up attempt and manage the sign-up flow. You can use this to create a [custom sign-up flow](/docs/guides/development/custom-flows/overview#sign-up-flow).
+
+## Returns
+
+<Typedoc src="types/use-sign-up-return" />
+
+## Examples
+
+### Check the current state of a sign-up
+
+The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs/reference/javascript/sign-up) object, which contains the current sign-up attempt status and methods to create a new sign-up attempt. The `isLoaded` property is used to handle the loading state.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/SignUpPage.tsx' }}
+  import { useSignUp } from '@clerk/clerk-react'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/sign-up/page.tsx' }}
+  'use client'
+
+  import { useSignUp } from '@clerk/nextjs'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+### Create a custom sign-up flow with `useSignUp()`
+
+The `useSignUp()` hook can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignUp()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).
diff --git a/docs/reference/hooks/use-user.mdx b/docs/reference/hooks/use-user.mdx
index 2322c9d0bd..f3e5d4e4ba 100644
--- a/docs/reference/hooks/use-user.mdx
+++ b/docs/reference/hooks/use-user.mdx
@@ -4,4 +4,213 @@ description: Access and manage the current user's data in your React application
 sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
 ---
 
-<Typedoc src="clerk-react/use-user" />
+The `useUser()` hook provides access to the current user's [`User`](/docs/reference/javascript/user) object, which contains all the data for a single user in your application and provides methods to manage their account. This hook also allows you to check if the user is signed in and if Clerk has loaded and initialized.
+
+## Returns
+
+<Typedoc src="types/use-user-return" />
+
+## Example
+
+### Get the current user
+
+The following example uses the `useUser()` hook to access the [`User`](/docs/reference/javascript/user) object, which contains the current user's data such as their full name. The `isLoaded` and `isSignedIn` properties are used to handle the loading state and to check if the user is signed in, respectively.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/Example.tsx' }}
+  import { useUser } from '@clerk/clerk-react'
+
+  export default function Example() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return <div>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/sign-up/page.tsx' }}
+  'use client'
+
+  import { useSignUp } from '@clerk/nextjs'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+### Update user data
+
+The following example uses the `useUser()` hook to access the [`User`](https://clerk.com/docs/reference/javascript/user) object, which calls the [`update()`](https://clerk.com/docs/reference/javascript/user#update) method to update the current user's information.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/Home.tsx' }}
+  import { useUser } from '@clerk/clerk-react'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/page.tsx' }}
+  'use client'
+
+  import { useUser } from '@clerk/nextjs'
+
+  export default function HomePage() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+### Reload user data
+
+The following example uses the `useUser()` hook to access the [`User`](https://clerk.com/docs/reference/javascript/user) object, which calls the [`reload()`](https://clerk.com/docs/reference/javascript/user#reload) method to get the latest user's information.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/Home.tsx' }}
+  import { useUser } from '@clerk/clerk-react'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/page.tsx' }}
+  'use client'
+
+  import { useUser } from '@clerk/nextjs'
+
+  export default function HomePage() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>

From 7a4340601e591c36334cd02e67b59a028f4fb377 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Wed, 1 Oct 2025 14:05:20 -0600
Subject: [PATCH 05/32] Remove testing code

---
 docs/reference/hooks/use-auth.mdx           |  2 +-
 docs/reference/hooks/use-reverification.mdx | 48 +++++++++++++++++++--
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index 951a345bbd..20708db274 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -23,4 +23,4 @@ The following example demonstrates how to use the `useAuth()` hook to access the
 
 ## Parameters
 
-<Typedoc src="clerk-react/use-auth-options" />
+{/* <Typedoc src="clerk-react/use-auth-options" /> */}
diff --git a/docs/reference/hooks/use-reverification.mdx b/docs/reference/hooks/use-reverification.mdx
index 1e44e87857..7f72bae3c2 100644
--- a/docs/reference/hooks/use-reverification.mdx
+++ b/docs/reference/hooks/use-reverification.mdx
@@ -14,19 +14,59 @@ When using reverification, a user's credentials are valid for 10 minutes. Once s
 
 ## Parameters
 
-<Typedoc src="shared/use-reverification-1" />
+<Properties>
+  - `fetcher`
+  - `Fetcher extends (...args: any[]) => Promise<any>`
+
+  A function that returns a promise.
+
+  ---
+
+  - `options?`
+  - [`UseReverificationOptions`](#use-reverification-options)
+
+  The optional options object.
+</Properties>
 
 ### `UseReverificationOptions`
 
-<Typedoc src="shared/use-reverification-options" />
+<Properties>
+  - `onNeedsReverification?`
+  - <code>(\{ complete, cancel, level }: [NeedsReverificationParameters](#needs-reverification-parameters)) => void</code>
+
+  Handler for the reverification process. Opts out of using the default UI. Use this to build a custom UI.
+</Properties>
 
 ### `NeedsReverificationParameters`
 
-<Typedoc src="shared/needs-reverification-parameters" />
+<Properties>
+  - `complete`
+  - `() => void`
+
+  Marks the reverification process as complete and retries the original request.
+
+  ---
+
+  - `cancel`
+  - `() => void`
+
+  Marks the reverification process as cancelled and rejects the original request.
+
+  ---
+
+  - `level`
+  - `"first_factor" | "second_factor" | "multi_factor" | undefined`
+
+  The verification level required for the reverification process.
+</Properties>
 
 ## Returns
 
-<Typedoc src="shared/use-reverification-result" />
+<Properties>
+  - `(...args: any[]) => Promise<any>`
+
+  The action returns the response from the fetcher function.
+</Properties>
 
 ## Examples
 

From d4ca96caea6d9ef9ddb94b97a221d80d9772c39d Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Wed, 1 Oct 2025 14:17:25 -0600
Subject: [PATCH 06/32] Add more hooks

---
 docs/reference/hooks/use-clerk.mdx        | 39 +++++++++++++++-
 docs/reference/hooks/use-session-list.mdx | 56 ++++++++++++++++++++++-
 2 files changed, 93 insertions(+), 2 deletions(-)

diff --git a/docs/reference/hooks/use-clerk.mdx b/docs/reference/hooks/use-clerk.mdx
index 26e922f2d2..f0537ee232 100644
--- a/docs/reference/hooks/use-clerk.mdx
+++ b/docs/reference/hooks/use-clerk.mdx
@@ -4,4 +4,41 @@ description: Access and manage the Clerk object in your React application with C
 sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
 ---
 
-<Typedoc src="clerk-react/use-clerk" />
+> [!WARNING]
+> This hook should only be used for advanced use cases, such as building a completely custom OAuth flow or as an escape hatch to access to the `Clerk` object.
+
+The `useClerk()` hook provides access to the [`Clerk`](/docs/reference/javascript/clerk) object, allowing you to build alternatives to any Clerk Component.
+
+## Returns
+
+The `useClerk()` hook returns the `Clerk` object, which includes all the methods and properties listed in the [`Clerk` reference](/docs/reference/javascript/clerk).
+
+## Example
+
+The following example uses the `useClerk()` hook to access the `clerk` object. The `clerk` object is used to call the [`openSignIn()`](/docs/reference/javascript/clerk#sign-in) method to open the sign-in modal.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/Home.tsx' }}
+  import { useClerk } from '@clerk/clerk-react'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/page.tsx' }}
+  'use client'
+
+  import { useClerk } from '@clerk/nextjs'
+
+  export default function HomePage() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-session-list.mdx b/docs/reference/hooks/use-session-list.mdx
index 5cc504fb2f..9993a5c022 100644
--- a/docs/reference/hooks/use-session-list.mdx
+++ b/docs/reference/hooks/use-session-list.mdx
@@ -4,4 +4,58 @@ description: Access and manage the current user's session list in your React app
 sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
 ---
 
-<Typedoc src="clerk-react/use-session-list" />
+The `useSessionList()` hook returns an array of [`Session`](/docs/reference/javascript/session) objects that have been registered on the client device.
+
+## Returns
+
+<Typedoc src="types/use-session-list-return" />
+
+## Example
+
+### Get a list of sessions
+
+The following example uses `useSessionList()` to get a list of sessions that have been registered on the client device. The `sessions` property is used to show the number of times the user has visited the page.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/Home.tsx' }}
+  import { useSessionList } from '@clerk/clerk-react'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/page.tsx' }}
+  'use client'
+
+  import { useSessionList } from '@clerk/nextjs'
+
+  export default function HomePage() {
+    const { isLoaded, sessions } = useSessionList()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>

From 955a81048fc0aadcb06303127d7c09bce0dce3c8 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Wed, 1 Oct 2025 16:32:18 -0600
Subject: [PATCH 07/32] Adds code examples for SDKs

---
 docs/reference/hooks/use-auth.mdx         | 295 +++++++++++++
 docs/reference/hooks/use-clerk.mdx        |  71 +++-
 docs/reference/hooks/use-session-list.mdx | 110 ++++-
 docs/reference/hooks/use-session.mdx      |  20 +-
 docs/reference/hooks/use-sign-in.mdx      |  86 ++++
 docs/reference/hooks/use-sign-up.mdx      |  86 ++++
 docs/reference/hooks/use-user.mdx         | 477 +++++++++++++++++++++-
 7 files changed, 1124 insertions(+), 21 deletions(-)

diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index 20708db274..fe6a5df73d 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -17,6 +17,301 @@ The `useAuth()` hook provides access to the current user's authentication state
 
 The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource.
 
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
+  import { useAuth } from '@clerk/clerk-react'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/external-data/page.tsx' }}
+  'use client'
+
+  import { useAuth } from '@clerk/nextjs'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useAuth } from '@clerk/react-router'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useAuth } from '@clerk/chrome-extension'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="remix">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useAuth } from '@clerk/remix'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useAuth } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/')({
+    component: ExternalDataPage,
+  })
+
+  function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+{/* <If sdk="astro">
+
+
+  </If> */}
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/external-data/page.tsx' }}
+  import { useAuth } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <View>
+        <Text>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </Text>
+        <TouchableOpacity onPress={fetchExternalData}>
+          <Text>Fetch Data</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+  ```
+</If>
+
 ## Returns
 
 <Typedoc src="types/use-auth-return" />
diff --git a/docs/reference/hooks/use-clerk.mdx b/docs/reference/hooks/use-clerk.mdx
index f0537ee232..329e9cca86 100644
--- a/docs/reference/hooks/use-clerk.mdx
+++ b/docs/reference/hooks/use-clerk.mdx
@@ -18,7 +18,7 @@ The `useClerk()` hook returns the `Clerk` object, which includes all the methods
 The following example uses the `useClerk()` hook to access the `clerk` object. The `clerk` object is used to call the [`openSignIn()`](/docs/reference/javascript/clerk#sign-in) method to open the sign-in modal.
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/Home.tsx' }}
+  ```tsx {{ filename: 'src/pages/Home.tsx' }}
   import { useClerk } from '@clerk/clerk-react'
 
   export default function Home() {
@@ -30,7 +30,7 @@ The following example uses the `useClerk()` hook to access the `clerk` object. T
 </If>
 
 <If sdk="nextjs">
-  ```tsx {{ filename: 'app/page.tsx' }}
+  ```tsx {{ filename: 'app/home/page.tsx' }}
   'use client'
 
   import { useClerk } from '@clerk/nextjs'
@@ -42,3 +42,70 @@ The following example uses the `useClerk()` hook to access the `clerk` object. T
   }
   ```
 </If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useClerk } from '@clerk/react-router'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useClerk } from '@clerk/chrome-extension'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="remix">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useClerk } from '@clerk/remix'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useClerk } from '@clerk/tanstack-react-start'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useClerk } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity } from 'react-native'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return (
+      <View>
+        <TouchableOpacity onPress={() => clerk.openSignIn({})}>
+          <Text>Sign in</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-session-list.mdx b/docs/reference/hooks/use-session-list.mdx
index 9993a5c022..f7af0587bc 100644
--- a/docs/reference/hooks/use-session-list.mdx
+++ b/docs/reference/hooks/use-session-list.mdx
@@ -17,7 +17,7 @@ The `useSessionList()` hook returns an array of [`Session`](/docs/reference/java
 The following example uses `useSessionList()` to get a list of sessions that have been registered on the client device. The `sessions` property is used to show the number of times the user has visited the page.
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/Home.tsx' }}
+  ```tsx {{ filename: 'src/pages/Home.tsx' }}
   import { useSessionList } from '@clerk/clerk-react'
 
   export default function Home() {
@@ -38,7 +38,7 @@ The following example uses `useSessionList()` to get a list of sessions that hav
 </If>
 
 <If sdk="nextjs">
-  ```tsx {{ filename: 'app/page.tsx' }}
+  ```tsx {{ filename: 'app/home/page.tsx' }}
   'use client'
 
   import { useSessionList } from '@clerk/nextjs'
@@ -59,3 +59,109 @@ The following example uses `useSessionList()` to get a list of sessions that hav
   }
   ```
 </If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSessionList } from '@clerk/react-router'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useSessionList } from '@clerk/chrome-extension'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="remix">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSessionList } from '@clerk/remix'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSessionList } from '@clerk/tanstack-react-start'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSessionList } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <View>
+        <Text>Welcome back. You've been here {sessions.length} times before.</Text>
+      </View>
+    )
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-session.mdx b/docs/reference/hooks/use-session.mdx
index 2fe285da83..75f5c616a3 100644
--- a/docs/reference/hooks/use-session.mdx
+++ b/docs/reference/hooks/use-session.mdx
@@ -17,7 +17,7 @@ The `useSession()` hook provides access to the current user's [`Session`](/docs/
 The following example uses the `useSession()` hook to access the `Session` object, which has the `lastActiveAt` property. The `lastActiveAt` property is a `Date` object used to show the time the session was last active.
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/Home.tsx' }}
+  ```tsx {{ filename: 'src/pages/Home.tsx' }}
   import { useSession } from '@clerk/clerk-react'
 
   export default function Home() {
@@ -42,7 +42,7 @@ The following example uses the `useSession()` hook to access the `Session` objec
 </If>
 
 <If sdk="nextjs">
-  ```tsx {{ filename: 'app/page.tsx' }}
+  ```tsx {{ filename: 'app/home/page.tsx' }}
   'use client'
 
   import { useSession } from '@clerk/nextjs'
@@ -70,8 +70,6 @@ The following example uses the `useSession()` hook to access the `Session` objec
 
 <If sdk="react-router">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
-  'use client'
-
   import { useSession } from '@clerk/react-router'
 
   export default function HomePage() {
@@ -96,9 +94,7 @@ The following example uses the `useSession()` hook to access the `Session` objec
 </If>
 
 <If sdk="chrome-extension">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
-  'use client'
-
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
   import { useSession } from '@clerk/chrome-extension'
 
   export default function HomePage() {
@@ -123,9 +119,7 @@ The following example uses the `useSession()` hook to access the `Session` objec
 </If>
 
 <If sdk="remix">
-  ```tsx {{ filename: 'app/page.tsx' }}
-  'use client'
-
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useSession } from '@clerk/remix'
 
   export default function HomePage() {
@@ -150,9 +144,7 @@ The following example uses the `useSession()` hook to access the `Session` objec
 </If>
 
 <If sdk="tanstack-react-start">
-  ```tsx {{ filename: 'app/page.tsx' }}
-  'use client'
-
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useSession } from '@clerk/tanstack-react-start'
   import { createFileRoute } from '@tanstack/react-router'
 
@@ -183,8 +175,6 @@ The following example uses the `useSession()` hook to access the `Session` objec
 
 <If sdk="expo">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
-  'use client'
-
   import { useSession } from '@clerk/clerk-expo'
   import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
 
diff --git a/docs/reference/hooks/use-sign-in.mdx b/docs/reference/hooks/use-sign-in.mdx
index e9ad569e98..bf00bdaae1 100644
--- a/docs/reference/hooks/use-sign-in.mdx
+++ b/docs/reference/hooks/use-sign-in.mdx
@@ -52,6 +52,92 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
   ```
 </If>
 
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignIn } from '@clerk/react-router'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useSignIn } from '@clerk/chrome-extension'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="remix">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignIn } from '@clerk/remix'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignIn } from '@clerk/tanstack-react-start'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignIn } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <View>The current sign-in attempt status is {signIn?.status}.</View>
+  }
+  ```
+</If>
+
 ### Create a custom sign-in flow with `useSignIn()`
 
 The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).
diff --git a/docs/reference/hooks/use-sign-up.mdx b/docs/reference/hooks/use-sign-up.mdx
index ff5f055df1..ba6957760b 100644
--- a/docs/reference/hooks/use-sign-up.mdx
+++ b/docs/reference/hooks/use-sign-up.mdx
@@ -52,6 +52,92 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
   ```
 </If>
 
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignUp } from '@clerk/react-router'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useSignUp } from '@clerk/chrome-extension'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="remix">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignUp } from '@clerk/remix'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignUp } from '@clerk/tanstack-react-start'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignUp } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <View>The current sign-up attempt status is {signUp?.status}.</View>
+  }
+  ```
+</If>
+
 ### Create a custom sign-up flow with `useSignUp()`
 
 The `useSignUp()` hook can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignUp()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).
diff --git a/docs/reference/hooks/use-user.mdx b/docs/reference/hooks/use-user.mdx
index f3e5d4e4ba..af59251215 100644
--- a/docs/reference/hooks/use-user.mdx
+++ b/docs/reference/hooks/use-user.mdx
@@ -17,10 +17,10 @@ The `useUser()` hook provides access to the current user's [`User`](/docs/refere
 The following example uses the `useUser()` hook to access the [`User`](/docs/reference/javascript/user) object, which contains the current user's data such as their full name. The `isLoaded` and `isSignedIn` properties are used to handle the loading state and to check if the user is signed in, respectively.
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/Example.tsx' }}
+  ```tsx {{ filename: 'src/pages/SignUp.tsx' }}
   import { useUser } from '@clerk/clerk-react'
 
-  export default function Example() {
+  export default function SignUpPage() {
     const { isSignedIn, user, isLoaded } = useUser()
 
     if (!isLoaded) {
@@ -55,6 +55,107 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   ```
 </If>
 
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/react-router'
+
+  export default function SignUpPage() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return <div>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useUser } from '@clerk/chrome-extension'
+
+  export default function SignUpPage() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return <div>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="remix">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/remix'
+
+  export default function SignUpPage() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return <div>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/tanstack-react-start'
+
+  export default function SignUpPage() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return <div>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function SignUpPage() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    if (!isLoaded) {
+      return <View>Loading...</View>
+    }
+
+    if (!isSignedIn) {
+      return <View>Sign in to view this page</View>
+    }
+
+    return <View>Hello {user.firstName}!</View>
+  }
+  ```
+</If>
+
 ### Update user data
 
 The following example uses the `useUser()` hook to access the [`User`](https://clerk.com/docs/reference/javascript/user) object, which calls the [`update()`](https://clerk.com/docs/reference/javascript/user#update) method to update the current user's information.
@@ -125,6 +226,167 @@ The following example uses the `useUser()` hook to access the [`User`](https://c
   ```
 </If>
 
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/react-router'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useUser } from '@clerk/chrome-extension'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="remix">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/remix'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/tanstack-react-start'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
 ### Reload user data
 
 The following example uses the `useUser()` hook to access the [`User`](https://clerk.com/docs/reference/javascript/user) object, which calls the [`reload()`](https://clerk.com/docs/reference/javascript/user#reload) method to get the latest user's information.
@@ -214,3 +476,214 @@ The following example uses the `useUser()` hook to access the [`User`](https://c
   }
   ```
 </If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/react-router'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useUser } from '@clerk/chrome-extension'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="remix">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/remix'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/tanstack-react-start'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>

From cca2ef10dcb460bd1954914931d0ec4a67087e17 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Wed, 1 Oct 2025 17:04:09 -0600
Subject: [PATCH 08/32] Remove remix

---
 docs/reference/hooks/use-auth.mdx         | 42 +---------
 docs/reference/hooks/use-clerk.mdx        | 14 +---
 docs/reference/hooks/use-session-list.mdx | 23 +-----
 docs/reference/hooks/use-session.mdx      | 27 +------
 docs/reference/hooks/use-sign-in.mdx      | 19 +----
 docs/reference/hooks/use-sign-up.mdx      | 19 +----
 docs/reference/hooks/use-user.mdx         | 96 +----------------------
 7 files changed, 7 insertions(+), 233 deletions(-)

diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index fe6a5df73d..7f49fda99d 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -1,7 +1,7 @@
 ---
 title: useAuth()
 description: Access and manage authentication state in your application with Clerk's useAuth() hook.
-sdk: astro, chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
+sdk: astro, chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 ---
 
 The `useAuth()` hook provides access to the current user's authentication state and methods to manage the active session.
@@ -179,46 +179,6 @@ The following example demonstrates how to use the `useAuth()` hook to access the
   ```
 </If>
 
-<If sdk="remix">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
-  import { useAuth } from '@clerk/remix'
-
-  export default function ExternalDataPage() {
-    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
-
-    const fetchExternalData = async () => {
-      const token = await getToken()
-
-      // Fetch data from an external API
-      const response = await fetch('https://api.example.com/data', {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      })
-
-      return response.json()
-    }
-
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
-
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
-
-    return (
-      <div>
-        <p>
-          Hello, {userId}! Your current active session is {sessionId}.
-        </p>
-        <button onClick={fetchExternalData}>Fetch Data</button>
-      </div>
-    )
-  }
-  ```
-</If>
-
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useAuth } from '@clerk/tanstack-react-start'
diff --git a/docs/reference/hooks/use-clerk.mdx b/docs/reference/hooks/use-clerk.mdx
index 329e9cca86..3012838c65 100644
--- a/docs/reference/hooks/use-clerk.mdx
+++ b/docs/reference/hooks/use-clerk.mdx
@@ -1,7 +1,7 @@
 ---
 title: useClerk()
 description: Access and manage the Clerk object in your React application with Clerk's useClerk() hook.
-sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
+sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 ---
 
 > [!WARNING]
@@ -67,18 +67,6 @@ The following example uses the `useClerk()` hook to access the `clerk` object. T
   ```
 </If>
 
-<If sdk="remix">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
-  import { useClerk } from '@clerk/remix'
-
-  export default function Home() {
-    const clerk = useClerk()
-
-    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
-  }
-  ```
-</If>
-
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useClerk } from '@clerk/tanstack-react-start'
diff --git a/docs/reference/hooks/use-session-list.mdx b/docs/reference/hooks/use-session-list.mdx
index f7af0587bc..fc675cb2b9 100644
--- a/docs/reference/hooks/use-session-list.mdx
+++ b/docs/reference/hooks/use-session-list.mdx
@@ -1,7 +1,7 @@
 ---
 title: useSessionList()
 description: Access and manage the current user's session list in your React application with Clerk's useSessionList() hook.
-sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
+sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 ---
 
 The `useSessionList()` hook returns an array of [`Session`](/docs/reference/javascript/session) objects that have been registered on the client device.
@@ -102,27 +102,6 @@ The following example uses `useSessionList()` to get a list of sessions that hav
   ```
 </If>
 
-<If sdk="remix">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
-  import { useSessionList } from '@clerk/remix'
-
-  export default function Home() {
-    const { isLoaded, sessions } = useSessionList()
-
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
-
-    return (
-      <div>
-        <p>Welcome back. You've been here {sessions.length} times before.</p>
-      </div>
-    )
-  }
-  ```
-</If>
-
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useSessionList } from '@clerk/tanstack-react-start'
diff --git a/docs/reference/hooks/use-session.mdx b/docs/reference/hooks/use-session.mdx
index 75f5c616a3..e7f2c23f6c 100644
--- a/docs/reference/hooks/use-session.mdx
+++ b/docs/reference/hooks/use-session.mdx
@@ -1,7 +1,7 @@
 ---
 title: useSession()
 description: Access and manage the current user's session in your React application with Clerk's useSession() hook.
-sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
+sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 ---
 
 The `useSession()` hook provides access to the current user's [`Session`](/docs/reference/javascript/session) object, as well as helpers for setting the active session.
@@ -118,31 +118,6 @@ The following example uses the `useSession()` hook to access the `Session` objec
   ```
 </If>
 
-<If sdk="remix">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
-  import { useSession } from '@clerk/remix'
-
-  export default function HomePage() {
-    const { isLoaded, session, isSignedIn } = useSession()
-
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
-    if (!isSignedIn) {
-      // Handle signed out state
-      return null
-    }
-
-    return (
-      <div>
-        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
-      </div>
-    )
-  }
-  ```
-</If>
-
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useSession } from '@clerk/tanstack-react-start'
diff --git a/docs/reference/hooks/use-sign-in.mdx b/docs/reference/hooks/use-sign-in.mdx
index bf00bdaae1..8b1bb8bcc8 100644
--- a/docs/reference/hooks/use-sign-in.mdx
+++ b/docs/reference/hooks/use-sign-in.mdx
@@ -1,7 +1,7 @@
 ---
 title: useSignIn()
 description: Access and manage the current user's sign-in state in your React application with Clerk's useSignIn() hook.
-sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
+sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 ---
 
 The `useSignIn()` hook provides access to the [`SignIn`](/docs/reference/javascript/sign-in) object, which allows you to check the current state of a sign-in attempt and manage the sign-in flow. You can use this to create a [custom sign-in flow](/docs/guides/development/custom-flows/overview#sign-in-flow).
@@ -86,23 +86,6 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
   ```
 </If>
 
-<If sdk="remix">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
-  import { useSignIn } from '@clerk/remix'
-
-  export default function SignInPage() {
-    const { isLoaded, signIn } = useSignIn()
-
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
-
-    return <div>The current sign-in attempt status is {signIn?.status}.</div>
-  }
-  ```
-</If>
-
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useSignIn } from '@clerk/tanstack-react-start'
diff --git a/docs/reference/hooks/use-sign-up.mdx b/docs/reference/hooks/use-sign-up.mdx
index ba6957760b..bdcea08bf6 100644
--- a/docs/reference/hooks/use-sign-up.mdx
+++ b/docs/reference/hooks/use-sign-up.mdx
@@ -1,7 +1,7 @@
 ---
 title: useSignUp()
 description: Access and manage the current user's sign-up state in your React application with Clerk's useSignUp() hook.
-sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
+sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 ---
 
 The `useSignUp()` hook provides access to the [`SignUp`](/docs/reference/javascript/sign-up) object, which allows you to check the current state of a sign-up attempt and manage the sign-up flow. You can use this to create a [custom sign-up flow](/docs/guides/development/custom-flows/overview#sign-up-flow).
@@ -86,23 +86,6 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
   ```
 </If>
 
-<If sdk="remix">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
-  import { useSignUp } from '@clerk/remix'
-
-  export default function SignUpPage() {
-    const { isLoaded, signUp } = useSignUp()
-
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
-
-    return <div>The current sign-up attempt status is {signUp?.status}.</div>
-  }
-  ```
-</If>
-
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useSignUp } from '@clerk/tanstack-react-start'
diff --git a/docs/reference/hooks/use-user.mdx b/docs/reference/hooks/use-user.mdx
index af59251215..c47225f2ea 100644
--- a/docs/reference/hooks/use-user.mdx
+++ b/docs/reference/hooks/use-user.mdx
@@ -1,7 +1,7 @@
 ---
 title: useUser()
 description: Access and manage the current user's data in your React application with Clerk's useUser() hook.
-sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
+sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 ---
 
 The `useUser()` hook provides access to the current user's [`User`](/docs/reference/javascript/user) object, which contains all the data for a single user in your application and provides methods to manage their account. This hook also allows you to check if the user is signed in and if Clerk has loaded and initialized.
@@ -95,26 +95,6 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   ```
 </If>
 
-<If sdk="remix">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
-  import { useUser } from '@clerk/remix'
-
-  export default function SignUpPage() {
-    const { isSignedIn, user, isLoaded } = useUser()
-
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
-
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
-
-    return <div>Hello {user.firstName}!</div>
-  }
-  ```
-</If>
-
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useUser } from '@clerk/tanstack-react-start'
@@ -290,38 +270,6 @@ The following example uses the `useUser()` hook to access the [`User`](https://c
   ```
 </If>
 
-<If sdk="remix">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
-  import { useUser } from '@clerk/remix'
-
-  export default function Home() {
-    const { isSignedIn, isLoaded, user } = useUser()
-
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
-
-    if (!isSignedIn) return null
-
-    const updateUser = async () => {
-      await user.update({
-        firstName: 'John',
-        lastName: 'Doe',
-      })
-    }
-
-    return (
-      <>
-        <button onClick={updateUser}>Update your name</button>
-        <p>user.firstName: {user.firstName}</p>
-        <p>user.lastName: {user.lastName}</p>
-      </>
-    )
-  }
-  ```
-</If>
-
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useUser } from '@clerk/tanstack-react-start'
@@ -561,48 +509,6 @@ The following example uses the `useUser()` hook to access the [`User`](https://c
   ```
 </If>
 
-<If sdk="remix">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
-  import { useUser } from '@clerk/remix'
-
-  export default function Home() {
-    const { isSignedIn, isLoaded, user } = useUser()
-
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
-
-    if (!isSignedIn) return null
-
-    const updateUser = async () => {
-      // Update data via an API endpoint
-      const updateMetadata = await fetch('/api/updateMetadata', {
-        method: 'POST',
-        body: JSON.stringify({
-          role: 'admin',
-        }),
-      })
-
-      // Check if the update was successful
-      if ((await updateMetadata.json()).message !== 'success') {
-        throw new Error('Error updating')
-      }
-
-      // If the update was successful, reload the user data
-      await user.reload()
-    }
-
-    return (
-      <>
-        <button onClick={updateUser}>Update your metadata</button>
-        <p>user role: {user.publicMetadata.role}</p>
-      </>
-    )
-  }
-  ```
-</If>
-
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useUser } from '@clerk/tanstack-react-start'

From ba4900e1f9e37c4072c3718e0b141799f79450cf Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Thu, 2 Oct 2025 12:36:21 -0600
Subject: [PATCH 09/32] Refinements

---
 docs/reference/hooks/use-user.mdx | 36 +++++++++++++++++--------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/docs/reference/hooks/use-user.mdx b/docs/reference/hooks/use-user.mdx
index c47225f2ea..067862837d 100644
--- a/docs/reference/hooks/use-user.mdx
+++ b/docs/reference/hooks/use-user.mdx
@@ -17,10 +17,10 @@ The `useUser()` hook provides access to the current user's [`User`](/docs/refere
 The following example uses the `useUser()` hook to access the [`User`](/docs/reference/javascript/user) object, which contains the current user's data such as their full name. The `isLoaded` and `isSignedIn` properties are used to handle the loading state and to check if the user is signed in, respectively.
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/pages/SignUp.tsx' }}
+  ```tsx {{ filename: 'src/pages/Example.tsx' }}
   import { useUser } from '@clerk/clerk-react'
 
-  export default function SignUpPage() {
+  export default function Example() {
     const { isSignedIn, user, isLoaded } = useUser()
 
     if (!isLoaded) {
@@ -37,20 +37,24 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="nextjs">
-  ```tsx {{ filename: 'app/sign-up/page.tsx' }}
+  ```tsx {{ filename: 'app/example/page.tsx' }}
   'use client'
 
-  import { useSignUp } from '@clerk/nextjs'
+  import { useUser } from '@clerk/nextjs'
 
-  export default function SignUpPage() {
-    const { isLoaded, signUp } = useSignUp()
+  export default function Example() {
+    const { isSignedIn, user, isLoaded } = useUser()
 
     if (!isLoaded) {
       // Handle loading state
-      return null
+      return <div>Loading...</div>
     }
 
-    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return <div>Hello {user.firstName}!</div>
   }
   ```
 </If>
@@ -59,7 +63,7 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useUser } from '@clerk/react-router'
 
-  export default function SignUpPage() {
+  export default function Example() {
     const { isSignedIn, user, isLoaded } = useUser()
 
     if (!isLoaded) {
@@ -79,7 +83,7 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   ```tsx {{ filename: 'src/routes/page.tsx' }}
   import { useUser } from '@clerk/chrome-extension'
 
-  export default function SignUpPage() {
+  export default function Example() {
     const { isSignedIn, user, isLoaded } = useUser()
 
     if (!isLoaded) {
@@ -99,7 +103,7 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useUser } from '@clerk/tanstack-react-start'
 
-  export default function SignUpPage() {
+  export default function Example() {
     const { isSignedIn, user, isLoaded } = useUser()
 
     if (!isLoaded) {
@@ -120,7 +124,7 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   import { useUser } from '@clerk/clerk-expo'
   import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
 
-  export default function SignUpPage() {
+  export default function Example() {
     const { isSignedIn, user, isLoaded } = useUser()
 
     if (!isLoaded) {
@@ -138,10 +142,10 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 
 ### Update user data
 
-The following example uses the `useUser()` hook to access the [`User`](https://clerk.com/docs/reference/javascript/user) object, which calls the [`update()`](https://clerk.com/docs/reference/javascript/user#update) method to update the current user's information.
+The following example uses the `useUser()` hook to access the [`User`](/docs/reference/javascript/user) object, which calls the [`update()`](/docs/reference/javascript/user#update) method to update the current user's information.
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/Home.tsx' }}
+  ```tsx {{ filename: 'src/pages/Home.tsx' }}
   import { useUser } from '@clerk/clerk-react'
 
   export default function Home() {
@@ -337,10 +341,10 @@ The following example uses the `useUser()` hook to access the [`User`](https://c
 
 ### Reload user data
 
-The following example uses the `useUser()` hook to access the [`User`](https://clerk.com/docs/reference/javascript/user) object, which calls the [`reload()`](https://clerk.com/docs/reference/javascript/user#reload) method to get the latest user's information.
+The following example uses the `useUser()` hook to access the [`User`](/docs/reference/javascript/user) object, which calls the [`reload()`](/docs/reference/javascript/user#reload) method to get the latest user's information.
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/Home.tsx' }}
+  ```tsx {{ filename: 'src/pages/Home.tsx' }}
   import { useUser } from '@clerk/clerk-react'
 
   export default function Home() {

From d485759f75d350e57daa608b045cb81e874702aa Mon Sep 17 00:00:00 2001
From: Nick Wylynko <nickwylynko@clerk.dev>
Date: Mon, 6 Oct 2025 20:33:23 +0800
Subject: [PATCH 10/32] Uncomment the use auth parameters

---
 docs/reference/hooks/use-auth.mdx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index 7f49fda99d..edcc993eb9 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -272,10 +272,12 @@ The following example demonstrates how to use the `useAuth()` hook to access the
   ```
 </If>
 
+## Parameters
+
+<Typedoc src="clerk-react/use-auth-options" />
+
 ## Returns
 
 <Typedoc src="types/use-auth-return" />
 
-## Parameters
 
-{/* <Typedoc src="clerk-react/use-auth-options" /> */}

From b91bc45107cf07470eed1f6af7e29f04678c46d2 Mon Sep 17 00:00:00 2001
From: Nick Wylynko <nickwylynko@clerk.dev>
Date: Thu, 9 Oct 2025 01:21:31 +0800
Subject: [PATCH 11/32] switch to new typedocs

---
 docs/reference/hooks/use-auth.mdx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index edcc993eb9..cf040822f7 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -272,12 +272,8 @@ The following example demonstrates how to use the `useAuth()` hook to access the
   ```
 </If>
 
-## Parameters
+<Typedoc src="clerk-react/use-auth-params" />
 
-<Typedoc src="clerk-react/use-auth-options" />
-
-## Returns
-
-<Typedoc src="types/use-auth-return" />
+<Typedoc src="clerk-react/use-auth-return" />
 
 

From 368aee11e8171d60d86d6e16a169309643ad982e Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Wed, 8 Oct 2025 13:15:52 -0600
Subject: [PATCH 12/32] Replace typedoc return with new location

---
 docs/reference/hooks/use-clerk.mdx        | 6 ++----
 docs/reference/hooks/use-session-list.mdx | 6 ++----
 docs/reference/hooks/use-session.mdx      | 6 ++----
 docs/reference/hooks/use-sign-in.mdx      | 6 ++----
 docs/reference/hooks/use-sign-up.mdx      | 6 ++----
 docs/reference/hooks/use-user.mdx         | 6 ++----
 6 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/docs/reference/hooks/use-clerk.mdx b/docs/reference/hooks/use-clerk.mdx
index 3012838c65..5221383944 100644
--- a/docs/reference/hooks/use-clerk.mdx
+++ b/docs/reference/hooks/use-clerk.mdx
@@ -9,10 +9,6 @@ sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 
 The `useClerk()` hook provides access to the [`Clerk`](/docs/reference/javascript/clerk) object, allowing you to build alternatives to any Clerk Component.
 
-## Returns
-
-The `useClerk()` hook returns the `Clerk` object, which includes all the methods and properties listed in the [`Clerk` reference](/docs/reference/javascript/clerk).
-
 ## Example
 
 The following example uses the `useClerk()` hook to access the `clerk` object. The `clerk` object is used to call the [`openSignIn()`](/docs/reference/javascript/clerk#sign-in) method to open the sign-in modal.
@@ -97,3 +93,5 @@ The following example uses the `useClerk()` hook to access the `clerk` object. T
   }
   ```
 </If>
+
+<Typedoc src="clerk-react/use-clerk-return" />
diff --git a/docs/reference/hooks/use-session-list.mdx b/docs/reference/hooks/use-session-list.mdx
index fc675cb2b9..a2da5c5ecd 100644
--- a/docs/reference/hooks/use-session-list.mdx
+++ b/docs/reference/hooks/use-session-list.mdx
@@ -6,10 +6,6 @@ sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 
 The `useSessionList()` hook returns an array of [`Session`](/docs/reference/javascript/session) objects that have been registered on the client device.
 
-## Returns
-
-<Typedoc src="types/use-session-list-return" />
-
 ## Example
 
 ### Get a list of sessions
@@ -144,3 +140,5 @@ The following example uses `useSessionList()` to get a list of sessions that hav
   }
   ```
 </If>
+
+<Typedoc src="clerk-react/use-session-list-return" />
diff --git a/docs/reference/hooks/use-session.mdx b/docs/reference/hooks/use-session.mdx
index e7f2c23f6c..dc128f4a0a 100644
--- a/docs/reference/hooks/use-session.mdx
+++ b/docs/reference/hooks/use-session.mdx
@@ -6,10 +6,6 @@ sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 
 The `useSession()` hook provides access to the current user's [`Session`](/docs/reference/javascript/session) object, as well as helpers for setting the active session.
 
-## Returns
-
-<Typedoc src="types/use-session-return" />
-
 ## Example
 
 ### Access the `Session` object
@@ -173,3 +169,5 @@ The following example uses the `useSession()` hook to access the `Session` objec
   }
   ```
 </If>
+
+<Typedoc src="clerk-react/use-session-return" />
diff --git a/docs/reference/hooks/use-sign-in.mdx b/docs/reference/hooks/use-sign-in.mdx
index 8b1bb8bcc8..1108833536 100644
--- a/docs/reference/hooks/use-sign-in.mdx
+++ b/docs/reference/hooks/use-sign-in.mdx
@@ -6,10 +6,6 @@ sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 
 The `useSignIn()` hook provides access to the [`SignIn`](/docs/reference/javascript/sign-in) object, which allows you to check the current state of a sign-in attempt and manage the sign-in flow. You can use this to create a [custom sign-in flow](/docs/guides/development/custom-flows/overview#sign-in-flow).
 
-## Returns
-
-<Typedoc src="types/use-sign-in-return" />
-
 ## Examples
 
 ### Check the current state of a sign-in
@@ -124,3 +120,5 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
 ### Create a custom sign-in flow with `useSignIn()`
 
 The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).
+
+<Typedoc src="clerk-react/use-sign-in-return" />
diff --git a/docs/reference/hooks/use-sign-up.mdx b/docs/reference/hooks/use-sign-up.mdx
index bdcea08bf6..911147d4dc 100644
--- a/docs/reference/hooks/use-sign-up.mdx
+++ b/docs/reference/hooks/use-sign-up.mdx
@@ -6,10 +6,6 @@ sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 
 The `useSignUp()` hook provides access to the [`SignUp`](/docs/reference/javascript/sign-up) object, which allows you to check the current state of a sign-up attempt and manage the sign-up flow. You can use this to create a [custom sign-up flow](/docs/guides/development/custom-flows/overview#sign-up-flow).
 
-## Returns
-
-<Typedoc src="types/use-sign-up-return" />
-
 ## Examples
 
 ### Check the current state of a sign-up
@@ -124,3 +120,5 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
 ### Create a custom sign-up flow with `useSignUp()`
 
 The `useSignUp()` hook can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignUp()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).
+
+<Typedoc src="clerk-react/use-sign-up-return" />
diff --git a/docs/reference/hooks/use-user.mdx b/docs/reference/hooks/use-user.mdx
index 067862837d..c46f668941 100644
--- a/docs/reference/hooks/use-user.mdx
+++ b/docs/reference/hooks/use-user.mdx
@@ -6,10 +6,6 @@ sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 
 The `useUser()` hook provides access to the current user's [`User`](/docs/reference/javascript/user) object, which contains all the data for a single user in your application and provides methods to manage their account. This hook also allows you to check if the user is signed in and if Clerk has loaded and initialized.
 
-## Returns
-
-<Typedoc src="types/use-user-return" />
-
 ## Example
 
 ### Get the current user
@@ -597,3 +593,5 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   }
   ```
 </If>
+
+<Typedoc src="clerk-react/use-user-return" />

From 63593e01f700e9a53bd209747d96dc3a64ac3ee6 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Wed, 8 Oct 2025 14:40:28 -0600
Subject: [PATCH 13/32] Add code examples billing hooks

---
 .../billing/add-new-payment-method.mdx        |  81 ++++
 docs/reference/hooks/use-auth.mdx             |   2 -
 docs/reference/hooks/use-checkout.mdx         | 425 ++++++++++++------
 docs/reference/hooks/use-payment-attempts.mdx | 349 +++++++++-----
 docs/reference/hooks/use-payment-methods.mdx  | 301 +++++++++----
 docs/reference/hooks/use-plans.mdx            | 226 +++++++---
 docs/reference/hooks/use-statements.mdx       | 187 +++++---
 docs/reference/hooks/use-subscription.mdx     | 424 ++++++++++++-----
 8 files changed, 1446 insertions(+), 549 deletions(-)

diff --git a/docs/_partials/billing/add-new-payment-method.mdx b/docs/_partials/billing/add-new-payment-method.mdx
index 80e5bde2f6..0286b0d868 100644
--- a/docs/_partials/billing/add-new-payment-method.mdx
+++ b/docs/_partials/billing/add-new-payment-method.mdx
@@ -3,6 +3,7 @@ The following example demonstrates how to create a billing page where a user can
 - **`<UserBillingPage />`**: Sets up the `<PaymentElementProvider />`, which specifies that the payment actions within its children are `for` the `user`.
 - **`<AddPaymentMethodForm />`**: Renders the payment form and handles the submission logic. It uses `usePaymentElement()` to get the `submit` function and `useUser()` to get the `user` object. When the form is submitted, it first creates a payment token and then attaches it to the user.
 
+<If sdk="nextjs">
 <CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
   ```tsx {{ filename: 'app/user/billing/page.tsx' }}
   import { ClerkLoaded } from '@clerk/nextjs'
@@ -80,3 +81,83 @@ The following example demonstrates how to create a billing page where a user can
   }
   ```
 </CodeBlockTabs>
+</If>
+
+<If sdk="react">
+<CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
+  ```tsx {{ filename: 'src/user/billing/page.tsx' }}
+  import { ClerkLoaded } from '@clerk/clerk-react'
+  import { PaymentElementProvider } from '@clerk/clerk-react/experimental'
+  import { AddPaymentMethodForm } from './AddPaymentMethodForm'
+
+  export default function Page() {
+    return (
+      <div>
+        <h1>Billing Settings</h1>
+
+        <ClerkLoaded>
+          <PaymentElementProvider for="user">
+            <AddPaymentMethodForm />
+          </PaymentElementProvider>
+        </ClerkLoaded>
+      </div>
+    )
+  }
+  ```
+
+  ```tsx {{ filename: 'src/user/billing/AddPaymentMethodForm.tsx' }}
+  import { useUser } from '@clerk/clerk-react'
+  import { usePaymentElement, PaymentElement } from '@clerk/clerk-react/experimental'
+  import { useState } from 'react'
+
+  export function AddPaymentMethodForm() {
+    const { user } = useUser()
+    const { submit, isFormReady } = usePaymentElement()
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    const handleAddPaymentMethod = async (e: React.FormEvent) => {
+      e.preventDefault()
+      if (!isFormReady || !user) {
+        return
+      }
+
+      setError(null)
+      setIsSubmitting(true)
+
+      try {
+        // 1. Submit the form to the payment provider to get a payment token
+        const { data, error } = await submit()
+
+        // Usually a validation error from stripe that you can ignore.
+        if (error) {
+          setIsSubmitting(false)
+          return
+        }
+
+        // 2. Use the token to add the payment source to the user
+        await user.addPaymentSource(data)
+
+        // 3. Handle success (e.g., show a confirmation, clear the form)
+        alert('Payment method added successfully!')
+      } catch (err: any) {
+        setError(err.message || 'An unexpected error occurred.')
+      } finally {
+        setIsSubmitting(false)
+      }
+    }
+
+    return (
+      <form onSubmit={handleAddPaymentMethod}>
+        <h3>Add a new payment method</h3>
+        <PaymentElement />
+        <button type="submit" disabled={!isFormReady || isSubmitting}>
+          {isSubmitting ? 'Saving...' : 'Save Card'}
+        </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
+      </form>
+    )
+  }
+  ```
+</CodeBlockTabs>
+</If>
\ No newline at end of file
diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index cf040822f7..799838c466 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -275,5 +275,3 @@ The following example demonstrates how to use the `useAuth()` hook to access the
 <Typedoc src="clerk-react/use-auth-params" />
 
 <Typedoc src="clerk-react/use-auth-return" />
-
-
diff --git a/docs/reference/hooks/use-checkout.mdx b/docs/reference/hooks/use-checkout.mdx
index f6ef42ff76..36a2e8b1fb 100644
--- a/docs/reference/hooks/use-checkout.mdx
+++ b/docs/reference/hooks/use-checkout.mdx
@@ -198,119 +198,237 @@ The `useCheckout()` hook can be used with a context provider for managing state
 
     <Tabs items={["<SubscriptionPage />", "<CheckoutFlow />"]}>
       <Tab>
-        ```tsx {{ filename: 'src/components/SubscriptionPage.tsx', collapsible: true }}
-        import { CheckoutProvider } from '@clerk/nextjs/experimental'
-        import { ClerkLoaded } from '@clerk/nextjs'
-        import { CheckoutFlow } from './CheckoutFlow'
-
-        export function SubscriptionPage() {
-          // `<CheckoutProvider />` sets the context for the checkout flow.
-          // Any child component can now call `useCheckout()` to access this context.
-          return (
-            <CheckoutProvider for="user" planId="cplan_xxx" planPeriod="month">
-              <div>
-                <h1>Upgrade Your Plan</h1>
-                <p>You are about to subscribe to our monthly plan</p>
-                <ClerkLoaded>
-                  <CheckoutFlow />
-                </ClerkLoaded>
-              </div>
-            </CheckoutProvider>
-          )
-        }
-        ```
+        <If sdk="nextjs">
+          ```tsx {{ filename: 'src/components/SubscriptionPage.tsx', collapsible: true }}
+          import { CheckoutProvider } from '@clerk/nextjs/experimental'
+          import { ClerkLoaded } from '@clerk/nextjs'
+          import { CheckoutFlow } from './CheckoutFlow'
+
+          export function SubscriptionPage() {
+            // `<CheckoutProvider />` sets the context for the checkout flow.
+            // Any child component can now call `useCheckout()` to access this context.
+            return (
+              <CheckoutProvider for="user" planId="cplan_xxx" planPeriod="month">
+                <div>
+                  <h1>Upgrade Your Plan</h1>
+                  <p>You are about to subscribe to our monthly plan</p>
+                  <ClerkLoaded>
+                    <CheckoutFlow />
+                  </ClerkLoaded>
+                </div>
+              </CheckoutProvider>
+            )
+          }
+          ```
+        </If>
+
+        <If sdk="react">
+          ```tsx {{ filename: 'src/components/SubscriptionPage.tsx', collapsible: true }}
+          import { CheckoutProvider } from '@clerk/clerk-react/experimental'
+          import { ClerkLoaded } from '@clerk/clerk-react'
+          import { CheckoutFlow } from './CheckoutFlow'
+
+          export function SubscriptionPage() {
+            // `<CheckoutProvider />` sets the context for the checkout flow.
+            // Any child component can now call `useCheckout()` to access this context.
+            return (
+              <CheckoutProvider for="user" planId="cplan_xxx" planPeriod="month">
+                <div>
+                  <h1>Upgrade Your Plan</h1>
+                  <p>You are about to subscribe to our monthly plan</p>
+                  <ClerkLoaded>
+                    <CheckoutFlow />
+                  </ClerkLoaded>
+                </div>
+              </CheckoutProvider>
+            )
+          }
+          ```
+        </If>
       </Tab>
 
       <Tab>
-        ```tsx {{ filename: 'src/components/CheckoutFlow.tsx', collapsible: true }}
-        'use client'
+        <If sdk="nextjs">
+          ```tsx {{ filename: 'src/components/CheckoutFlow.tsx', collapsible: true }}
+          'use client'
 
-        import { useCheckout } from '@clerk/nextjs/experimental'
+          import { useCheckout } from '@clerk/nextjs/experimental'
 
-        export function CheckoutFlow() {
-          const { checkout } = useCheckout()
-          const { status } = checkout
+          export function CheckoutFlow() {
+            const { checkout } = useCheckout()
+            const { status } = checkout
 
-          if (status === 'needs_initialization') {
-            return <CheckoutInitialization />
-          }
+            if (status === 'needs_initialization') {
+              return <CheckoutInitialization />
+            }
 
-          return (
-            <div className="checkout-container">
-              <CheckoutSummary />
-              <PaymentSection />
-            </div>
-          )
-        }
+            return (
+              <div className="checkout-container">
+                <CheckoutSummary />
+                <PaymentSection />
+              </div>
+            )
+          }
 
-        function CheckoutInitialization() {
-          const { checkout } = useCheckout()
-          const { start, fetchStatus } = checkout
+          function CheckoutInitialization() {
+            const { checkout } = useCheckout()
+            const { start, fetchStatus } = checkout
 
-          return (
-            <button onClick={start} disabled={fetchStatus === 'fetching'} className="start-checkout-button">
-              {fetchStatus === 'fetching' ? 'Initializing...' : 'Start Checkout'}
-            </button>
-          )
-        }
+            return (
+              <button onClick={start} disabled={fetchStatus === 'fetching'} className="start-checkout-button">
+                {fetchStatus === 'fetching' ? 'Initializing...' : 'Start Checkout'}
+              </button>
+            )
+          }
 
-        function PaymentSection() {
-          const { checkout } = useCheckout()
-
-          const { isConfirming, confirm, finalize, error } = checkout
-
-          const [isProcessing, setIsProcessing] = useState(false)
-          const [paymentMethodId, setPaymentMethodId] = useState<string | null>(null)
-
-          const submitSelectedMethod = async () => {
-            if (isProcessing || !paymentMethodId) return
-            setIsProcessing(true)
-
-            try {
-              // Confirm checkout with payment method
-              await confirm({
-                paymentSourceId: paymentMethodId,
-              })
-              // Calling `.finalize` enables you to sync the client-side state with the server-side state of your users.
-              // It revalidates all authorization checks computed within server components.
-              finalize({ redirectUrl: '/dashboard' })
-            } catch (error) {
-              console.error('Payment failed:', error)
-            } finally {
-              setIsProcessing(false)
+          function PaymentSection() {
+            const { checkout } = useCheckout()
+
+            const { isConfirming, confirm, finalize, error } = checkout
+
+            const [isProcessing, setIsProcessing] = useState(false)
+            const [paymentMethodId, setPaymentMethodId] = useState<string | null>(null)
+
+            const submitSelectedMethod = async () => {
+              if (isProcessing || !paymentMethodId) return
+              setIsProcessing(true)
+
+              try {
+                // Confirm checkout with payment method
+                await confirm({
+                  paymentSourceId: paymentMethodId,
+                })
+                // Calling `.finalize` enables you to sync the client-side state with the server-side state of your users.
+                // It revalidates all authorization checks computed within server components.
+                finalize({ redirectUrl: '/dashboard' })
+              } catch (error) {
+                console.error('Payment failed:', error)
+              } finally {
+                setIsProcessing(false)
+              }
             }
+
+            return (
+              <>
+                {/* A component that lists a user's payment methods and allows them to select one. See an example: https://clerk.com/docs/reference/hooks/use-payment-methods#examples */}
+                <PaymentMethods onChange={setPaymentMethodId} />
+
+                {error && <div>{error.message}</div>}
+
+                <button type="button" disabled={isProcessing || isConfirming} onClick={submitSelectedMethod}>
+                  {isProcessing || isConfirming ? 'Processing...' : 'Complete Purchase'}
+                </button>
+              </>
+            )
           }
 
-          return (
-            <>
-              {/* A component that lists a user's payment methods and allows them to select one. See an example: https://clerk.com/docs/reference/hooks/use-payment-methods#examples */}
-              <PaymentMethods onChange={setPaymentMethodId} />
+          function CheckoutSummary() {
+            const { checkout } = useCheckout()
+            const { plan, totals } = checkout
+
+            return (
+              <div>
+                <h2>Order Summary</h2>
+                <span>{plan?.name}</span>
+                <span>
+                  {totals?.totalDueNow.currencySymbol}
+                  {totals?.totalDueNow.amountFormatted}
+                </span>
+              </div>
+            )
+          }
+          ```
+        </If>
+
+        <If sdk="react">
+          ```tsx {{ filename: 'src/components/CheckoutFlow.tsx', collapsible: true }}
+          import { useCheckout } from '@clerk/clerk-react/experimental'
+
+          export function CheckoutFlow() {
+            const { checkout } = useCheckout()
+            const { status } = checkout
+
+            if (status === 'needs_initialization') {
+              return <CheckoutInitialization />
+            }
+
+            return (
+              <div className="checkout-container">
+                <CheckoutSummary />
+                <PaymentSection />
+              </div>
+            )
+          }
 
-              {error && <div>{error.message}</div>}
+          function CheckoutInitialization() {
+            const { checkout } = useCheckout()
+            const { start, fetchStatus } = checkout
 
-              <button type="button" disabled={isProcessing || isConfirming} onClick={submitSelectedMethod}>
-                {isProcessing || isConfirming ? 'Processing...' : 'Complete Purchase'}
+            return (
+              <button onClick={start} disabled={fetchStatus === 'fetching'} className="start-checkout-button">
+                {fetchStatus === 'fetching' ? 'Initializing...' : 'Start Checkout'}
               </button>
-            </>
-          )
-        }
+            )
+          }
 
-        function CheckoutSummary() {
-          const { checkout } = useCheckout()
-          const { plan, totals } = checkout
-
-          return (
-            <div>
-              <h2>Order Summary</h2>
-              <span>{plan?.name}</span>
-              <span>
-                {totals?.totalDueNow.currencySymbol}
-                {totals?.totalDueNow.amountFormatted}
-              </span>
-            </div>
-          )
-        }
-        ```
+          function PaymentSection() {
+            const { checkout } = useCheckout()
+
+            const { isConfirming, confirm, finalize, error } = checkout
+
+            const [isProcessing, setIsProcessing] = useState(false)
+            const [paymentMethodId, setPaymentMethodId] = useState<string | null>(null)
+
+            const submitSelectedMethod = async () => {
+              if (isProcessing || !paymentMethodId) return
+              setIsProcessing(true)
+
+              try {
+                // Confirm checkout with payment method
+                await confirm({
+                  paymentSourceId: paymentMethodId,
+                })
+                // Calling `.finalize` enables you to sync the client-side state with the server-side state of your users.
+                // It revalidates all authorization checks computed within server components.
+                finalize({ redirectUrl: '/dashboard' })
+              } catch (error) {
+                console.error('Payment failed:', error)
+              } finally {
+                setIsProcessing(false)
+              }
+            }
+
+            return (
+              <>
+                {/* A component that lists a user's payment methods and allows them to select one. See an example: https://clerk.com/docs/reference/hooks/use-payment-methods#examples */}
+                <PaymentMethods onChange={setPaymentMethodId} />
+
+                {error && <div>{error.message}</div>}
+
+                <button type="button" disabled={isProcessing || isConfirming} onClick={submitSelectedMethod}>
+                  {isProcessing || isConfirming ? 'Processing...' : 'Complete Purchase'}
+                </button>
+              </>
+            )
+          }
+
+          function CheckoutSummary() {
+            const { checkout } = useCheckout()
+            const { plan, totals } = checkout
+
+            return (
+              <div>
+                <h2>Order Summary</h2>
+                <span>{plan?.name}</span>
+                <span>
+                  {totals?.totalDueNow.currencySymbol}
+                  {totals?.totalDueNow.amountFormatted}
+                </span>
+              </div>
+            )
+          }
+          ```
+        </If>
       </Tab>
     </Tabs>
   </Tab>
@@ -320,48 +438,93 @@ The `useCheckout()` hook can be used with a context provider for managing state
 
     The following example shows an `<UpgradeButton />` component that manages its own checkout flow.
 
-    ```tsx {{ filename: 'src/components/UpgradeButton.tsx' }}
-    'use client'
+    <If sdk="nextjs">
+      ```tsx {{ filename: 'src/components/UpgradeButton.tsx' }}
+      'use client'
 
-    import { useCheckout } from '@clerk/nextjs/experimental'
+      import { useCheckout } from '@clerk/nextjs/experimental'
 
-    export function UpgradeButton({
-      planId,
-      planPeriod,
-    }: {
-      planId: string
-      planPeriod: 'month' | 'annual'
-    }) {
-      // Pass options directly to the hook when not using a provider.
-      const { checkout } = useCheckout({
+      export function UpgradeButton({
         planId,
         planPeriod,
-        for: 'user',
-      })
-
-      const { start, status, isStarting, error } = checkout
-
-      const handleStartCheckout = async () => {
-        try {
-          await start()
-          // In a real app, you would now use the `externalClientSecret`
-          // from the checkout object to render a payment form.
-          console.log('Checkout started! Status:', checkout.status)
-        } catch (e) {
-          console.error('Error starting checkout:', e)
+      }: {
+        planId: string
+        planPeriod: 'month' | 'annual'
+      }) {
+        // Pass options directly to the hook when not using a provider.
+        const { checkout } = useCheckout({
+          planId,
+          planPeriod,
+          for: 'user',
+        })
+
+        const { start, status, isStarting, error } = checkout
+
+        const handleStartCheckout = async () => {
+          try {
+            await start()
+            // In a real app, you would now use the `externalClientSecret`
+            // from the checkout object to render a payment form.
+            console.log('Checkout started! Status:', checkout.status)
+          } catch (e) {
+            console.error('Error starting checkout:', e)
+          }
         }
+
+        return (
+          <div>
+            <button onClick={handleStartCheckout} disabled={isStarting}>
+              {isStarting ? 'Initializing...' : `Upgrade to ${planPeriod} plan`}
+            </button>
+            {error && <p style={{ color: 'red' }}>Error: {error.errors[0].message}</p>}
+          </div>
+        )
       }
+      ```
+    </If>
+
+    <If sdk="react">
+      ```tsx {{ filename: 'src/components/UpgradeButton.tsx' }}
+      import { useCheckout } from '@clerk/clerk-react/experimental'
 
-      return (
-        <div>
-          <button onClick={handleStartCheckout} disabled={isStarting}>
-            {isStarting ? 'Initializing...' : `Upgrade to ${planPeriod} plan`}
-          </button>
-          {error && <p style={{ color: 'red' }}>Error: {error.errors[0].message}</p>}
-        </div>
-      )
-    }
-    ```
+      export function UpgradeButton({
+        planId,
+        planPeriod,
+      }: {
+        planId: string
+        planPeriod: 'month' | 'annual'
+      }) {
+        // Pass options directly to the hook when not using a provider.
+        const { checkout } = useCheckout({
+          planId,
+          planPeriod,
+          for: 'user',
+        })
+
+        const { start, status, isStarting, error } = checkout
+
+        const handleStartCheckout = async () => {
+          try {
+            await start()
+            // In a real app, you would now use the `externalClientSecret`
+            // from the checkout object to render a payment form.
+            console.log('Checkout started! Status:', checkout.status)
+          } catch (e) {
+            console.error('Error starting checkout:', e)
+          }
+        }
+
+        return (
+          <div>
+            <button onClick={handleStartCheckout} disabled={isStarting}>
+              {isStarting ? 'Initializing...' : `Upgrade to ${planPeriod} plan`}
+            </button>
+            {error && <p style={{ color: 'red' }}>Error: {error.errors[0].message}</p>}
+          </div>
+        )
+      }
+      ```
+    </If>
   </Tab>
 </Tabs>
 
diff --git a/docs/reference/hooks/use-payment-attempts.mdx b/docs/reference/hooks/use-payment-attempts.mdx
index 968eb44acc..d9396f8b6e 100644
--- a/docs/reference/hooks/use-payment-attempts.mdx
+++ b/docs/reference/hooks/use-payment-attempts.mdx
@@ -162,137 +162,276 @@ The `usePaymentAttempts()` hook provides access to the payment attempts associat
 
 The following example demonstrates how to fetch and display a user's payment attempts.
 
-```tsx
-import { usePaymentAttempts } from '@clerk/nextjs/experimental'
-
-function PaymentAttemptsList() {
-  const { data, isLoading } = usePaymentAttempts({
-    for: 'user',
-    pageSize: 10,
-  })
+<If sdk="nextjs">
+  ```tsx
+  import { usePaymentAttempts } from '@clerk/nextjs/experimental'
+
+  function PaymentAttemptsList() {
+    const { data, isLoading } = usePaymentAttempts({
+      for: 'user',
+      pageSize: 10,
+    })
+
+    if (isLoading) {
+      return <div>Loading payment attempts...</div>
+    }
 
-  if (isLoading) {
-    return <div>Loading payment attempts...</div>
-  }
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
 
-  if (!data || data.length === 0) {
-    return <div>No payment attempts found.</div>
+    return (
+      <ul>
+        {data?.map((attempt) => (
+          <li key={attempt.id}>
+            Payment #{attempt.id} - {attempt.status}
+            <br />
+            Amount: {attempt.amount.amountFormatted} on {new Date(attempt.updatedAt).toLocaleString()}
+          </li>
+        ))}
+      </ul>
+    )
   }
+  ```
+</If>
 
-  return (
-    <ul>
-      {data?.map((attempt) => (
-        <li key={attempt.id}>
-          Payment #{attempt.id} - {attempt.status}
-          <br />
-          Amount: {attempt.amount.amountFormatted} on {new Date(attempt.updatedAt).toLocaleString()}
-        </li>
-      ))}
-    </ul>
-  )
-}
-```
-
-### Infinite pagination
-
-The following example demonstrates how to implement infinite scrolling with payment attempts.
-
-```tsx
-import { usePaymentAttempts } from '@clerk/nextjs/experimental'
+<If sdk="react">
+  ```tsx
+  import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
 
-function InfinitePaymentAttempts() {
-  const { data, isLoading, hasNextPage, fetchNext } = usePaymentAttempts({
-    for: 'user',
-    infinite: true,
-    pageSize: 20,
-  })
+  function PaymentAttemptsList() {
+    const { data, isLoading } = usePaymentAttempts({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
+    if (isLoading) {
+      return <div>Loading payment attempts...</div>
+    }
 
-  if (!data || data.length === 0) {
-    return <div>No payment attempts found.</div>
-  }
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
 
-  return (
-    <div>
+    return (
       <ul>
         {data?.map((attempt) => (
           <li key={attempt.id}>
-            Payment attempt for {attempt.amount.amountFormatted}
-            <br />
-            Status: {attempt.status}
+            Payment #{attempt.id} - {attempt.status}
             <br />
-            {attempt.status === 'failed' && attempt.failedAt && (
-              <span>Failed At: {new Date(attempt.failedAt).toLocaleString()}</span>
-            )}
+            Amount: {attempt.amount.amountFormatted} on {new Date(attempt.updatedAt).toLocaleString()}
           </li>
         ))}
       </ul>
+    )
+  }
+  ```
+</If>
 
-      {hasNextPage && <button onClick={() => fetchNext()}>Load more payment attempts</button>}
-    </div>
-  )
-}
-```
+### Infinite pagination
 
-### Payment attempts history table
+The following example demonstrates how to implement infinite scrolling with payment attempts.
 
-The following example demonstrates how to use `usePaymentAttempts()` to display a detailed payment history table.
+<If sdk="nextjs">
+  ```tsx
+  import { usePaymentAttempts } from '@clerk/nextjs/experimental'
 
-```tsx
-import { usePaymentAttempts } from '@clerk/nextjs/experimental'
+  function InfinitePaymentAttempts() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePaymentAttempts({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
 
-function PaymentAttemptsHistory() {
-  const { data, isLoading } = usePaymentAttempts({ for: 'user' })
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
 
-  if (isLoading) {
-    return <div>Loading payment attempts...</div>
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
+
+    return (
+      <div>
+        <ul>
+          {data?.map((attempt) => (
+            <li key={attempt.id}>
+              Payment attempt for {attempt.amount.amountFormatted}
+              <br />
+              Status: {attempt.status}
+              <br />
+              {attempt.status === 'failed' && attempt.failedAt && (
+                <span>Failed At: {new Date(attempt.failedAt).toLocaleString()}</span>
+              )}
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more payment attempts</button>}
+      </div>
+    )
   }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx
+  import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
+
+  function InfinitePaymentAttempts() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePaymentAttempts({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
+
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
+
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
 
-  if (!data || data.length === 0) {
-    return <div>No payment attempts found.</div>
+    return (
+      <div>
+        <ul>
+          {data?.map((attempt) => (
+            <li key={attempt.id}>
+              Payment attempt for {attempt.amount.amountFormatted}
+              <br />
+              Status: {attempt.status}
+              <br />
+              {attempt.status === 'failed' && attempt.failedAt && (
+                <span>Failed At: {new Date(attempt.failedAt).toLocaleString()}</span>
+              )}
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more payment attempts</button>}
+      </div>
+    )
   }
+  ```
+</If>
+
+### Payment attempts history table
+
+The following example demonstrates how to use `usePaymentAttempts()` to display a detailed payment history table.
+
+<If sdk="nextjs">
+  ```tsx
+  import { usePaymentAttempts } from '@clerk/nextjs/experimental'
+
+  function PaymentAttemptsHistory() {
+    const { data, isLoading } = usePaymentAttempts({ for: 'user' })
+
+    if (isLoading) {
+      return <div>Loading payment attempts...</div>
+    }
+
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
 
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'paid':
-        return 'green'
-      case 'failed':
-        return 'red'
-      case 'pending':
-        return 'orange'
-      default:
-        return 'gray'
+    const getStatusColor = (status: string) => {
+      switch (status) {
+        case 'paid':
+          return 'green'
+        case 'failed':
+          return 'red'
+        case 'pending':
+          return 'orange'
+        default:
+          return 'gray'
+      }
     }
+
+    return (
+      <table>
+        <thead>
+          <tr>
+            <th>Payment ID</th>
+            <th>Amount</th>
+            <th>Status</th>
+            <th>Date</th>
+            <th>Payment Method</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data?.map((attempt) => (
+            <tr key={attempt.id}>
+              <td>{attempt.id}</td>
+              <td>{attempt.amount.amountFormatted}</td>
+              <td style={{ color: getStatusColor(attempt.status) }}>{attempt.status}</td>
+              <td>{attempt.paidAt ? new Date(attempt.paidAt).toLocaleDateString() : '-'}</td>
+              <td>
+                {attempt.paymentSource.cardType} ****{attempt.paymentSource.last4}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    )
   }
+  ```
+</If>
 
-  return (
-    <table>
-      <thead>
-        <tr>
-          <th>Payment ID</th>
-          <th>Amount</th>
-          <th>Status</th>
-          <th>Date</th>
-          <th>Payment Method</th>
-        </tr>
-      </thead>
-      <tbody>
-        {data?.map((attempt) => (
-          <tr key={attempt.id}>
-            <td>{attempt.id}</td>
-            <td>{attempt.amount.amountFormatted}</td>
-            <td style={{ color: getStatusColor(attempt.status) }}>{attempt.status}</td>
-            <td>{attempt.paidAt ? new Date(attempt.paidAt).toLocaleDateString() : '-'}</td>
-            <td>
-              {attempt.paymentSource.cardType} ****{attempt.paymentSource.last4}
-            </td>
+<If sdk="react">
+  ```tsx
+  import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
+
+  function PaymentAttemptsHistory() {
+    const { data, isLoading } = usePaymentAttempts({ for: 'user' })
+
+    if (isLoading) {
+      return <div>Loading payment attempts...</div>
+    }
+
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
+
+    const getStatusColor = (status: string) => {
+      switch (status) {
+        case 'paid':
+          return 'green'
+        case 'failed':
+          return 'red'
+        case 'pending':
+          return 'orange'
+        default:
+          return 'gray'
+      }
+    }
+
+    return (
+      <table>
+        <thead>
+          <tr>
+            <th>Payment ID</th>
+            <th>Amount</th>
+            <th>Status</th>
+            <th>Date</th>
+            <th>Payment Method</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}
-```
+        </thead>
+        <tbody>
+          {data?.map((attempt) => (
+            <tr key={attempt.id}>
+              <td>{attempt.id}</td>
+              <td>{attempt.amount.amountFormatted}</td>
+              <td style={{ color: getStatusColor(attempt.status) }}>{attempt.status}</td>
+              <td>{attempt.paidAt ? new Date(attempt.paidAt).toLocaleDateString() : '-'}</td>
+              <td>
+                {attempt.paymentSource.cardType} ****{attempt.paymentSource.last4}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    )
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-payment-methods.mdx b/docs/reference/hooks/use-payment-methods.mdx
index f93745bcdf..65acb72c1e 100644
--- a/docs/reference/hooks/use-payment-methods.mdx
+++ b/docs/reference/hooks/use-payment-methods.mdx
@@ -120,122 +120,243 @@ The `usePaymentMethods()` hook provides access to the payment methods associated
 
 The following example demonstrates how to fetch and display a user's payment methods.
 
-```tsx
-import { usePaymentMethods } from '@clerk/nextjs/experimental'
+<If sdk="nextjs">
+  ```tsx
+  import { usePaymentMethods } from '@clerk/nextjs/experimental'
+
+  function PaymentMethodsList() {
+    const { data, isLoading } = usePaymentMethods({
+      for: 'user',
+      pageSize: 10,
+    })
+
+    if (isLoading) {
+      return <div>Loading payment methods...</div>
+    }
 
-function PaymentMethodsList() {
-  const { data, isLoading } = usePaymentMethods({
-    for: 'user',
-    pageSize: 10,
-  })
+    if (!data || data.length === 0) {
+      // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/add-new-payment-method
+      return <div>No payment methods found. Please add a payment method to your account.</div>
+    }
 
-  if (isLoading) {
-    return <div>Loading payment methods...</div>
+    return (
+      <ul>
+        {data?.map((method) => (
+          <li key={method.id}>
+            {method.cardType} **** {method.last4}
+            {method.isDefault ? ' (Default)' : null}
+          </li>
+        ))}
+      </ul>
+    )
   }
+  ```
+</If>
 
-  if (!data || data.length === 0) {
-    // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/add-new-payment-method
-    return <div>No payment methods found. Please add a payment method to your account.</div>
-  }
+<If sdk="react">
+  ```tsx
+  import { usePaymentMethods } from '@clerk/clerk-react/experimental'
+
+  function PaymentMethodsList() {
+    const { data, isLoading } = usePaymentMethods({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  return (
-    <ul>
-      {data?.map((method) => (
-        <li key={method.id}>
-          {method.cardType} **** {method.last4}
-          {method.isDefault ? ' (Default)' : null}
-        </li>
-      ))}
-    </ul>
-  )
-}
-```
+    if (isLoading) {
+      return <div>Loading payment methods...</div>
+    }
+
+    if (!data || data.length === 0) {
+      // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/add-new-payment-method
+      return <div>No payment methods found. Please add a payment method to your account.</div>
+    }
+
+    return (
+      <ul>
+        {data?.map((method) => (
+          <li key={method.id}>
+            {method.cardType} **** {method.last4}
+            {method.isDefault ? ' (Default)' : null}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+  ```
+</If>
 
 ### Infinite pagination
 
 The following example demonstrates how to implement infinite scrolling with payment methods.
 
-```tsx
-import { usePaymentMethods } from '@clerk/nextjs/experimental'
+<If sdk="nextjs">
+  ```tsx
+  import { usePaymentMethods } from '@clerk/nextjs/experimental'
 
-function InfinitePaymentMethods() {
-  const { data, isLoading, hasNextPage, fetchNext } = usePaymentMethods({
-    for: 'user',
-    infinite: true,
-    pageSize: 20,
-  })
+  function InfinitePaymentMethods() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePaymentMethods({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
 
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
+
+    if (!data || data.length === 0) {
+      // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/add-new-payment-method
+      return <div>No payment methods found. Please add a payment method to your account.</div>
+    }
 
-  if (!data || data.length === 0) {
-    // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/add-new-payment-method
-    return <div>No payment methods found. Please add a payment method to your account.</div>
+    return (
+      <div>
+        <ul>
+          {data?.map((method) => (
+            <li key={method.id}>
+              {method.cardType} ending in {method.last4}
+              {method.status === 'expired' ? ' (Expired)' : null}
+              {method.status === 'disconnected' ? ' (Disconnected)' : null}
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more payment methods</button>}
+      </div>
+    )
   }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx
+  import { usePaymentMethods } from '@clerk/clerk-react/experimental'
+
+  function InfinitePaymentMethods() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePaymentMethods({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
+
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
 
-  return (
-    <div>
-      <ul>
-        {data?.map((method) => (
-          <li key={method.id}>
-            {method.cardType} ending in {method.last4}
-            {method.status === 'expired' ? ' (Expired)' : null}
-            {method.status === 'disconnected' ? ' (Disconnected)' : null}
-          </li>
-        ))}
-      </ul>
+    if (!data || data.length === 0) {
+      // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/add-new-payment-method
+      return <div>No payment methods found. Please add a payment method to your account.</div>
+    }
 
-      {hasNextPage && <button onClick={() => fetchNext()}>Load more payment methods</button>}
-    </div>
-  )
-}
-```
+    return (
+      <div>
+        <ul>
+          {data?.map((method) => (
+            <li key={method.id}>
+              {method.cardType} ending in {method.last4}
+              {method.status === 'expired' ? ' (Expired)' : null}
+              {method.status === 'disconnected' ? ' (Disconnected)' : null}
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more payment methods</button>}
+      </div>
+    )
+  }
+  ```
+</If>
 
 ### With checkout flow
 
 The following example demonstrates how to use `usePaymentMethods()` in a checkout flow to select an existing payment method. For more information on how to build a checkout flow with an existing payment method, see [Build a custom checkout flow](/docs/guides/development/custom-flows/billing/checkout-new-payment-method).
 
-```tsx
-import { usePaymentMethods, useCheckout } from '@clerk/nextjs/experimental'
-
-function CheckoutPaymentSelection() {
-  const { data, isLoading } = usePaymentMethods({ for: 'user' })
-  const { checkout } = useCheckout()
-  const { confirm, finalize } = checkout
-
-  const handlePaymentSubmit = async (paymentMethodId: string) => {
-    try {
-      // Confirm checkout with selected payment method
-      await confirm({ paymentSourceId: paymentMethodId })
-      // Complete checkout and redirect
-      finalize({ redirectUrl: '/dashboard' })
-    } catch (error) {
-      console.error('Payment failed:', error)
+<If sdk="nextjs">
+  ```tsx
+  import { usePaymentMethods, useCheckout } from '@clerk/nextjs/experimental'
+
+  function CheckoutPaymentSelection() {
+    const { data, isLoading } = usePaymentMethods({ for: 'user' })
+    const { checkout } = useCheckout()
+    const { confirm, finalize } = checkout
+
+    const handlePaymentSubmit = async (paymentMethodId: string) => {
+      try {
+        // Confirm checkout with selected payment method
+        await confirm({ paymentSourceId: paymentMethodId })
+        // Complete checkout and redirect
+        finalize({ redirectUrl: '/dashboard' })
+      } catch (error) {
+        console.error('Payment failed:', error)
+      }
     }
-  }
 
-  if (isLoading) {
-    return <div>Loading payment methods...</div>
-  }
+    if (isLoading) {
+      return <div>Loading payment methods...</div>
+    }
 
-  if (!data || data.length === 0) {
-    // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/checkout-new-payment-method
-    return <div>No payment methods found. Please add a payment method to your account.</div>
+    if (!data || data.length === 0) {
+      // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/checkout-new-payment-method
+      return <div>No payment methods found. Please add a payment method to your account.</div>
+    }
+
+    return (
+      <div>
+        <h3>Select a payment method</h3>
+        {data?.map((method) => (
+          <button key={method.id} onClick={() => handlePaymentSubmit(method.id)}>
+            Pay with {method.cardType} ending in {method.last4}
+          </button>
+        ))}
+      </div>
+    )
   }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx
+  import { usePaymentMethods, useCheckout } from '@clerk/clerk-react/experimental'
+
+  function CheckoutPaymentSelection() {
+    const { data, isLoading } = usePaymentMethods({ for: 'user' })
+    const { checkout } = useCheckout()
+    const { confirm, finalize } = checkout
+
+    const handlePaymentSubmit = async (paymentMethodId: string) => {
+      try {
+        // Confirm checkout with selected payment method
+        await confirm({ paymentSourceId: paymentMethodId })
+        // Complete checkout and redirect
+        finalize({ redirectUrl: '/dashboard' })
+      } catch (error) {
+        console.error('Payment failed:', error)
+      }
+    }
+
+    if (isLoading) {
+      return <div>Loading payment methods...</div>
+    }
+
+    if (!data || data.length === 0) {
+      // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/checkout-new-payment-method
+      return <div>No payment methods found. Please add a payment method to your account.</div>
+    }
 
-  return (
-    <div>
-      <h3>Select a payment method</h3>
-      {data?.map((method) => (
-        <button key={method.id} onClick={() => handlePaymentSubmit(method.id)}>
-          Pay with {method.cardType} ending in {method.last4}
-        </button>
-      ))}
-    </div>
-  )
-}
-```
+    return (
+      <div>
+        <h3>Select a payment method</h3>
+        {data?.map((method) => (
+          <button key={method.id} onClick={() => handlePaymentSubmit(method.id)}>
+            Pay with {method.cardType} ending in {method.last4}
+          </button>
+        ))}
+      </div>
+    )
+  }
+  ```
+</If>
 
 ## Related guides
 
diff --git a/docs/reference/hooks/use-plans.mdx b/docs/reference/hooks/use-plans.mdx
index 80b2ae763e..07bc894fb2 100644
--- a/docs/reference/hooks/use-plans.mdx
+++ b/docs/reference/hooks/use-plans.mdx
@@ -120,71 +120,67 @@ The `usePlans()` hook provides access to the subscription plans available in you
 
 The following example shows how to fetch and display available plans.
 
-```tsx
-'use client'
-import { usePlans } from '@clerk/nextjs/experimental'
-
-function PlansList() {
-  const { data, isLoading, hasNextPage, fetchNext, hasPreviousPage, fetchPrevious } = usePlans({
-    for: 'user',
-    pageSize: 10,
-  })
-
-  if (isLoading) {
-    return <div>Loading plans...</div>
-  }
-
-  return (
-    <ul>
-      {data?.map((plan) => (
-        <li key={plan.id}>
-          <h3>{plan.name}</h3>
-          <p>{plan.description}</p>
-          <p>Is free plan: {!plan.hasBaseFee ? 'Yes' : 'No'}</p>
-          <p>
-            Price per month: {plan.currency} {plan.amountFormatted}
-          </p>
-          <p>
-            Price per year: {plan.currency} {plan.annualAmountFormatted} equivalent to{' '}
-            {plan.currency} {plan.annualMonthlyAmountFormatted} per month
-          </p>
-          <h4>Features:</h4>
-          <ul>
-            {plan.features.map((feature) => (
-              <li key={feature.id}>{feature.name}</li>
-            ))}
-          </ul>
-        </li>
-      ))}
-
-      {hasNextPage && <button onClick={() => fetchNext()}>Next</button>}
-      {hasPreviousPage && <button onClick={() => fetchPrevious()}>Previous</button>}
-    </ul>
-  )
-}
-```
-
-### Infinite pagination
+<If sdk="nextjs">
+  ```tsx
+  'use client'
+  import { usePlans } from '@clerk/nextjs/experimental'
+
+  function PlansList() {
+    const { data, isLoading, hasNextPage, fetchNext, hasPreviousPage, fetchPrevious } = usePlans({
+      for: 'user',
+      pageSize: 10,
+    })
+
+    if (isLoading) {
+      return <div>Loading plans...</div>
+    }
+
+    return (
+      <ul>
+        {data?.map((plan) => (
+          <li key={plan.id}>
+            <h3>{plan.name}</h3>
+            <p>{plan.description}</p>
+            <p>Is free plan: {!plan.hasBaseFee ? 'Yes' : 'No'}</p>
+            <p>
+              Price per month: {plan.currency} {plan.amountFormatted}
+            </p>
+            <p>
+              Price per year: {plan.currency} {plan.annualAmountFormatted} equivalent to{' '}
+              {plan.currency} {plan.annualMonthlyAmountFormatted} per month
+            </p>
+            <h4>Features:</h4>
+            <ul>
+              {plan.features.map((feature) => (
+                <li key={feature.id}>{feature.name}</li>
+              ))}
+            </ul>
+          </li>
+        ))}
 
-The following example demonstrates how to implement infinite scrolling with plans.
+        {hasNextPage && <button onClick={() => fetchNext()}>Next</button>}
+        {hasPreviousPage && <button onClick={() => fetchPrevious()}>Previous</button>}
+      </ul>
+    )
+  }
+  ```
+</If>
 
-```tsx
-'use client'
-import { usePlans } from '@clerk/nextjs/experimental'
+<If sdk="react">
+  ```tsx
+  import { usePlans } from '@clerk/clerk-react/experimental'
 
-function InfinitePlansList() {
-  const { data, isLoading, hasNextPage, fetchNext } = usePlans({
-    for: 'user',
-    infinite: true,
-    pageSize: 2,
-  })
+  function PlansList() {
+    const { data, isLoading, hasNextPage, fetchNext, hasPreviousPage, fetchPrevious } = usePlans({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  if (isLoading) {
-    return <div>Loading plans...</div>
-  }
+    if (isLoading) {
+      return <div>Loading plans...</div>
+    }
 
-  return (
-    <div>
+    return (
       <ul>
         {data?.map((plan) => (
           <li key={plan.id}>
@@ -206,10 +202,110 @@ function InfinitePlansList() {
             </ul>
           </li>
         ))}
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Next</button>}
+        {hasPreviousPage && <button onClick={() => fetchPrevious()}>Previous</button>}
       </ul>
+    )
+  }
+  ```
+</If>
+
+### Infinite pagination
 
-      {hasNextPage && <button onClick={() => fetchNext()}>Load more plans</button>}
-    </div>
-  )
-}
-```
+The following example demonstrates how to implement infinite scrolling with plans.
+
+<If sdk="nextjs">
+  ```tsx
+  'use client'
+  import { usePlans } from '@clerk/nextjs/experimental'
+
+  function InfinitePlansList() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePlans({
+      for: 'user',
+      infinite: true,
+      pageSize: 2,
+    })
+
+    if (isLoading) {
+      return <div>Loading plans...</div>
+    }
+
+    return (
+      <div>
+        <ul>
+          {data?.map((plan) => (
+            <li key={plan.id}>
+              <h3>{plan.name}</h3>
+              <p>{plan.description}</p>
+              <p>Is free plan: {!plan.hasBaseFee ? 'Yes' : 'No'}</p>
+              <p>
+                Price per month: {plan.currency} {plan.amountFormatted}
+              </p>
+              <p>
+                Price per year: {plan.currency} {plan.annualAmountFormatted} equivalent to{' '}
+                {plan.currency} {plan.annualMonthlyAmountFormatted} per month
+              </p>
+              <h4>Features:</h4>
+              <ul>
+                {plan.features.map((feature) => (
+                  <li key={feature.id}>{feature.name}</li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more plans</button>}
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx
+  import { usePlans } from '@clerk/clerk-react/experimental'
+
+  function InfinitePlansList() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePlans({
+      for: 'user',
+      infinite: true,
+      pageSize: 2,
+    })
+
+    if (isLoading) {
+      return <div>Loading plans...</div>
+    }
+
+    return (
+      <div>
+        <ul>
+          {data?.map((plan) => (
+            <li key={plan.id}>
+              <h3>{plan.name}</h3>
+              <p>{plan.description}</p>
+              <p>Is free plan: {!plan.hasBaseFee ? 'Yes' : 'No'}</p>
+              <p>
+                Price per month: {plan.currency} {plan.amountFormatted}
+              </p>
+              <p>
+                Price per year: {plan.currency} {plan.annualAmountFormatted} equivalent to{' '}
+                {plan.currency} {plan.annualMonthlyAmountFormatted} per month
+              </p>
+              <h4>Features:</h4>
+              <ul>
+                {plan.features.map((feature) => (
+                  <li key={feature.id}>{feature.name}</li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more plans</button>}
+      </div>
+    )
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-statements.mdx b/docs/reference/hooks/use-statements.mdx
index 679f736a4c..c4062232c2 100644
--- a/docs/reference/hooks/use-statements.mdx
+++ b/docs/reference/hooks/use-statements.mdx
@@ -162,75 +162,152 @@ The `useStatements()` hook provides access to the statements associated with a u
 
 The following example demonstrates how to fetch and display a user's statements.
 
-```tsx
-import { useStatements } from '@clerk/nextjs/experimental'
+<If sdk="nextjs">
+  ```tsx
+  import { useStatements } from '@clerk/nextjs/experimental'
 
-function StatementsList() {
-  const { data, isLoading } = useStatements({
-    for: 'user',
-    pageSize: 10,
-  })
+  function StatementsList() {
+    const { data, isLoading } = useStatements({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  if (isLoading) {
-    return <div>Loading statements...</div>
-  }
-
-  if (!data || data.length === 0) {
-    return <div>No statements found.</div>
-  }
+    if (isLoading) {
+      return <div>Loading statements...</div>
+    }
 
-  return (
-    <ul>
-      {data?.map((statement) => (
-        <li key={statement.id}>
-          Statement ID: {statement.id} - {statement.status}
-          <br />
-          Date: {statement.timestamp.toLocaleDateString()}
-        </li>
-      ))}
-    </ul>
-  )
-}
-```
+    if (!data || data.length === 0) {
+      return <div>No statements found.</div>
+    }
 
-### Infinite pagination
-
-The following example demonstrates how to implement infinite scrolling with statements.
+    return (
+      <ul>
+        {data?.map((statement) => (
+          <li key={statement.id}>
+            Statement ID: {statement.id} - {statement.status}
+            <br />
+            Date: {statement.timestamp.toLocaleDateString()}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+  ```
+</If>
 
-```tsx
-import { useStatements } from '@clerk/nextjs/experimental'
+<If sdk="react">
+  ```tsx
+  import { useStatements } from '@clerk/clerk-react/experimental'
 
-function InfiniteStatements() {
-  const { data, isLoading, hasNextPage, fetchNext } = useStatements({
-    for: 'user',
-    infinite: true,
-    pageSize: 20,
-  })
+  function StatementsList() {
+    const { data, isLoading } = useStatements({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
+    if (isLoading) {
+      return <div>Loading statements...</div>
+    }
 
-  if (!data || data.length === 0) {
-    return <div>No statements found.</div>
-  }
+    if (!data || data.length === 0) {
+      return <div>No statements found.</div>
+    }
 
-  return (
-    <div>
+    return (
       <ul>
         {data?.map((statement) => (
           <li key={statement.id}>
-            Statement ID: {statement.id}
-            <br />
-            Amount: {statement.totals.grandTotal.amountFormatted}
+            Statement ID: {statement.id} - {statement.status}
             <br />
-            Status: {statement.status}
+            Date: {statement.timestamp.toLocaleDateString()}
           </li>
         ))}
       </ul>
+    )
+  }
+  ```
+</If>
 
-      {hasNextPage && <button onClick={() => fetchNext()}>Load more statements</button>}
-    </div>
-  )
-}
-```
+### Infinite pagination
+
+The following example demonstrates how to implement infinite scrolling with statements.
+
+<If sdk="nextjs">
+  ```tsx
+  import { useStatements } from '@clerk/nextjs/experimental'
+
+  function InfiniteStatements() {
+    const { data, isLoading, hasNextPage, fetchNext } = useStatements({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
+
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
+
+    if (!data || data.length === 0) {
+      return <div>No statements found.</div>
+    }
+
+    return (
+      <div>
+        <ul>
+          {data?.map((statement) => (
+            <li key={statement.id}>
+              Statement ID: {statement.id}
+              <br />
+              Amount: {statement.totals.grandTotal.amountFormatted}
+              <br />
+              Status: {statement.status}
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more statements</button>}
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx
+  import { useStatements } from '@clerk/clerk-react/experimental'
+
+  function InfiniteStatements() {
+    const { data, isLoading, hasNextPage, fetchNext } = useStatements({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
+
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
+
+    if (!data || data.length === 0) {
+      return <div>No statements found.</div>
+    }
+
+    return (
+      <div>
+        <ul>
+          {data?.map((statement) => (
+            <li key={statement.id}>
+              Statement ID: {statement.id}
+              <br />
+              Amount: {statement.totals.grandTotal.amountFormatted}
+              <br />
+              Status: {statement.status}
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more statements</button>}
+      </div>
+    )
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-subscription.mdx b/docs/reference/hooks/use-subscription.mdx
index fef72ab651..9aed0e5c73 100644
--- a/docs/reference/hooks/use-subscription.mdx
+++ b/docs/reference/hooks/use-subscription.mdx
@@ -74,144 +74,366 @@ The `useSubscription()` hook provides access to subscription information for use
 
 The following example shows how to fetch and display subscription information.
 
-```tsx
-'use client'
-import { useSubscription } from '@clerk/nextjs/experimental'
+<If sdk="nextjs">
+  ```tsx
+  'use client'
+  import { useSubscription } from '@clerk/nextjs/experimental'
 
-function SubscriptionInfo() {
-  const { data, isLoading, error } = useSubscription()
+  function SubscriptionInfo() {
+    const { data, isLoading, error } = useSubscription()
 
-  if (isLoading) {
-    return <div>Loading subscription...</div>
-  }
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
 
-  if (error) {
-    return <div>Error loading subscription: {error.message}</div>
-  }
+    if (error) {
+      return <div>Error loading subscription: {error.message}</div>
+    }
+
+    if (!data) {
+      return <div>No subscription found</div>
+    }
 
-  if (!data) {
-    return <div>No subscription found</div>
+    return (
+      <div>
+        <h2>Your Subscription</h2>
+        {/* Display subscription details */}
+      </div>
+    )
   }
+  ```
+</If>
 
-  return (
-    <div>
-      <h2>Your Subscription</h2>
-      {/* Display subscription details */}
-    </div>
-  )
-}
-```
+<If sdk="react">
+  ```tsx
+  import { useSubscription } from '@clerk/clerk-react/experimental'
+
+  function SubscriptionInfo() {
+    const { data, isLoading, error } = useSubscription()
+
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
+
+    if (error) {
+      return <div>Error loading subscription: {error.message}</div>
+    }
+
+    if (!data) {
+      return <div>No subscription found</div>
+    }
+
+    return (
+      <div>
+        <h2>Your Subscription</h2>
+        {/* Display subscription details */}
+      </div>
+    )
+  }
+  ```
+</If>
 
 ### Organization subscription
 
 The following example shows how to fetch an organization's subscription.
 
-```tsx
-'use client'
-import { useSubscription } from '@clerk/nextjs/experimental'
+<If sdk="nextjs">
+  ```tsx
+  'use client'
+  import { useSubscription } from '@clerk/nextjs/experimental'
 
-function OrganizationSubscription() {
-  const { data, isLoading, revalidate } = useSubscription({
-    for: 'organization',
-    keepPreviousData: true,
-  })
+  function OrganizationSubscription() {
+    const { data, isLoading, revalidate } = useSubscription({
+      for: 'organization',
+      keepPreviousData: true,
+    })
 
-  const handleSubscriptionUpdate = async () => {
-    // After making changes to the subscription
-    await revalidate()
-  }
+    const handleSubscriptionUpdate = async () => {
+      // After making changes to the subscription
+      await revalidate()
+    }
 
-  if (isLoading) {
-    return <div>Loading organization subscription...</div>
+    if (isLoading) {
+      return <div>Loading organization subscription...</div>
+    }
+
+    return (
+      <div>
+        <h2>Organization Subscription</h2>
+        {/* Display organization subscription details */}
+        <button onClick={handleSubscriptionUpdate}>Refresh Subscription</button>
+      </div>
+    )
   }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx
+  import { useSubscription } from '@clerk/clerk-react/experimental'
 
-  return (
-    <div>
-      <h2>Organization Subscription</h2>
-      {/* Display organization subscription details */}
-      <button onClick={handleSubscriptionUpdate}>Refresh Subscription</button>
-    </div>
-  )
-}
-```
+  function OrganizationSubscription() {
+    const { data, isLoading, revalidate } = useSubscription({
+      for: 'organization',
+      keepPreviousData: true,
+    })
+
+    const handleSubscriptionUpdate = async () => {
+      // After making changes to the subscription
+      await revalidate()
+    }
+
+    if (isLoading) {
+      return <div>Loading organization subscription...</div>
+    }
+
+    return (
+      <div>
+        <h2>Organization Subscription</h2>
+        {/* Display organization subscription details */}
+        <button onClick={handleSubscriptionUpdate}>Refresh Subscription</button>
+      </div>
+    )
+  }
+  ```
+</If>
 
 ### With error handling
 
 The following example shows how to handle subscription data with proper error states.
 
-```tsx {{ filename: 'app/pricing/subscription-details/page.tsx' }}
-'use client'
-import { useSubscription } from '@clerk/nextjs/experimental'
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/pricing/subscription-details/page.tsx' }}
+  'use client'
+  import { useSubscription } from '@clerk/nextjs/experimental'
 
-function SubscriptionDetails() {
-  const { data: subscription, isLoading } = useSubscription()
+  function SubscriptionDetails() {
+    const { data: subscription, isLoading } = useSubscription()
 
-  if (isLoading) {
-    return <div>Loading subscription...</div>
-  }
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
+
+    if (!subscription) {
+      return <div>No subscription</div>
+    }
 
-  if (!subscription) {
-    return <div>No subscription</div>
+    return (
+      <div className="subscription-details">
+        <h2>Subscription Details</h2>
+        <div className="status">
+          Status: <span className={`status-${subscription.status}`}>{subscription.status}</span>
+        </div>
+
+        <div className="dates">
+          <p>Active since: {subscription.activeAt.toLocaleDateString()}</p>
+          {subscription.pastDueAt && (
+            <p className="warning">Past due since: {subscription.pastDueAt.toLocaleDateString()}</p>
+          )}
+        </div>
+
+        {subscription.nextPayment && (
+          <div className="next-payment">
+            <h3>Next Payment</h3>
+            <p>Amount: {subscription.nextPayment.amount.amountFormatted}</p>
+            <p>Due: {subscription.nextPayment.date.toLocaleDateString()}</p>
+          </div>
+        )}
+
+        <div className="subscription-items">
+          <h3>Subscription Items</h3>
+          <ul>
+            {subscription.subscriptionItems.map((item) => (
+              <li key={item.id}>{/* Display subscription item details */}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    )
   }
 
-  return (
-    <div className="subscription-details">
-      <h2>Subscription Details</h2>
-      <div className="status">
-        Status: <span className={`status-${subscription.status}`}>{subscription.status}</span>
+  export default function Page() {
+    const { data, isLoading, error, isFetching, revalidate } = useSubscription()
+
+    if (error) {
+      return (
+        <div className="error-state">
+          <h3>Failed to load subscription</h3>
+          <p>{error.message}</p>
+          <button onClick={revalidate}>Try Again</button>
+        </div>
+      )
+    }
+
+    return (
+      <div className="subscription-status">
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <>
+            <div className="status-indicator">{isFetching && <span>Refreshing...</span>}</div>
+            {data ? <SubscriptionDetails /> : <div>No active subscription</div>}
+          </>
+        )}
       </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/pricing/subscription-details/page.tsx' }}
+  'use client'
+  import { useSubscription } from '@clerk/nextjs/experimental'
 
-      <div className="dates">
-        <p>Active since: {subscription.activeAt.toLocaleDateString()}</p>
-        {subscription.pastDueAt && (
-          <p className="warning">Past due since: {subscription.pastDueAt.toLocaleDateString()}</p>
+  function SubscriptionDetails() {
+    const { data: subscription, isLoading } = useSubscription()
+
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
+
+    if (!subscription) {
+      return <div>No subscription</div>
+    }
+
+    return (
+      <div className="subscription-details">
+        <h2>Subscription Details</h2>
+        <div className="status">
+          Status: <span className={`status-${subscription.status}`}>{subscription.status}</span>
+        </div>
+
+        <div className="dates">
+          <p>Active since: {subscription.activeAt.toLocaleDateString()}</p>
+          {subscription.pastDueAt && (
+            <p className="warning">Past due since: {subscription.pastDueAt.toLocaleDateString()}</p>
+          )}
+        </div>
+
+        {subscription.nextPayment && (
+          <div className="next-payment">
+            <h3>Next Payment</h3>
+            <p>Amount: {subscription.nextPayment.amount.amountFormatted}</p>
+            <p>Due: {subscription.nextPayment.date.toLocaleDateString()}</p>
+          </div>
         )}
+
+        <div className="subscription-items">
+          <h3>Subscription Items</h3>
+          <ul>
+            {subscription.subscriptionItems.map((item) => (
+              <li key={item.id}>{/* Display subscription item details */}</li>
+            ))}
+          </ul>
+        </div>
       </div>
+    )
+  }
+
+  export default function Page() {
+    const { data, isLoading, error, isFetching, revalidate } = useSubscription()
 
-      {subscription.nextPayment && (
-        <div className="next-payment">
-          <h3>Next Payment</h3>
-          <p>Amount: {subscription.nextPayment.amount.amountFormatted}</p>
-          <p>Due: {subscription.nextPayment.date.toLocaleDateString()}</p>
+    if (error) {
+      return (
+        <div className="error-state">
+          <h3>Failed to load subscription</h3>
+          <p>{error.message}</p>
+          <button onClick={revalidate}>Try Again</button>
         </div>
-      )}
-
-      <div className="subscription-items">
-        <h3>Subscription Items</h3>
-        <ul>
-          {subscription.subscriptionItems.map((item) => (
-            <li key={item.id}>{/* Display subscription item details */}</li>
-          ))}
-        </ul>
+      )
+    }
+
+    return (
+      <div className="subscription-status">
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <>
+            <div className="status-indicator">{isFetching && <span>Refreshing...</span>}</div>
+            {data ? <SubscriptionDetails /> : <div>No active subscription</div>}
+          </>
+        )}
       </div>
-    </div>
-  )
-}
+    )
+  }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pricing/subscription-details/page.tsx' }}
+  import { useSubscription } from '@clerk/clerk-react/experimental'
+
+  function SubscriptionDetails() {
+    const { data: subscription, isLoading } = useSubscription()
+
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
 
-export default function Page() {
-  const { data, isLoading, error, isFetching, revalidate } = useSubscription()
+    if (!subscription) {
+      return <div>No subscription</div>
+    }
 
-  if (error) {
     return (
-      <div className="error-state">
-        <h3>Failed to load subscription</h3>
-        <p>{error.message}</p>
-        <button onClick={revalidate}>Try Again</button>
+      <div className="subscription-details">
+        <h2>Subscription Details</h2>
+        <div className="status">
+          Status: <span className={`status-${subscription.status}`}>{subscription.status}</span>
+        </div>
+
+        <div className="dates">
+          <p>Active since: {subscription.activeAt.toLocaleDateString()}</p>
+          {subscription.pastDueAt && (
+            <p className="warning">Past due since: {subscription.pastDueAt.toLocaleDateString()}</p>
+          )}
+        </div>
+
+        {subscription.nextPayment && (
+          <div className="next-payment">
+            <h3>Next Payment</h3>
+            <p>Amount: {subscription.nextPayment.amount.amountFormatted}</p>
+            <p>Due: {subscription.nextPayment.date.toLocaleDateString()}</p>
+          </div>
+        )}
+
+        <div className="subscription-items">
+          <h3>Subscription Items</h3>
+          <ul>
+            {subscription.subscriptionItems.map((item) => (
+              <li key={item.id}>{/* Display subscription item details */}</li>
+            ))}
+          </ul>
+        </div>
       </div>
     )
   }
 
-  return (
-    <div className="subscription-status">
-      {isLoading ? (
-        <div>Loading...</div>
-      ) : (
-        <>
-          <div className="status-indicator">{isFetching && <span>Refreshing...</span>}</div>
-          {data ? <SubscriptionDetails /> : <div>No active subscription</div>}
-        </>
-      )}
-    </div>
-  )
-}
-```
+  export default function Page() {
+    const { data, isLoading, error, isFetching, revalidate } = useSubscription()
+
+    if (error) {
+      return (
+        <div className="error-state">
+          <h3>Failed to load subscription</h3>
+          <p>{error.message}</p>
+          <button onClick={revalidate}>Try Again</button>
+        </div>
+      )
+    }
+
+    return (
+      <div className="subscription-status">
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <>
+            <div className="status-indicator">{isFetching && <span>Refreshing...</span>}</div>
+            {data ? <SubscriptionDetails /> : <div>No active subscription</div>}
+          </>
+        )}
+      </div>
+    )
+  }
+  ```
+</If>

From 409c4e8cc6ff5449ea77042c3ad0e2d4e94ccadb Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Wed, 8 Oct 2025 15:19:00 -0600
Subject: [PATCH 14/32] Fix linting

---
 .../billing/add-new-payment-method.mdx        | 280 +++++++++---------
 1 file changed, 140 insertions(+), 140 deletions(-)

diff --git a/docs/_partials/billing/add-new-payment-method.mdx b/docs/_partials/billing/add-new-payment-method.mdx
index 0286b0d868..ca4d52d839 100644
--- a/docs/_partials/billing/add-new-payment-method.mdx
+++ b/docs/_partials/billing/add-new-payment-method.mdx
@@ -4,160 +4,160 @@ The following example demonstrates how to create a billing page where a user can
 - **`<AddPaymentMethodForm />`**: Renders the payment form and handles the submission logic. It uses `usePaymentElement()` to get the `submit` function and `useUser()` to get the `user` object. When the form is submitted, it first creates a payment token and then attaches it to the user.
 
 <If sdk="nextjs">
-<CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
-  ```tsx {{ filename: 'app/user/billing/page.tsx' }}
-  import { ClerkLoaded } from '@clerk/nextjs'
-  import { PaymentElementProvider } from '@clerk/nextjs/experimental'
-  import { AddPaymentMethodForm } from './AddPaymentMethodForm'
-
-  export default function Page() {
-    return (
-      <div>
-        <h1>Billing Settings</h1>
-
-        <ClerkLoaded>
-          <PaymentElementProvider for="user">
-            <AddPaymentMethodForm />
-          </PaymentElementProvider>
-        </ClerkLoaded>
-      </div>
-    )
-  }
-  ```
-
-  ```tsx {{ filename: 'app/user/billing/AddPaymentMethodForm.tsx' }}
-  'use client'
-  import { useUser } from '@clerk/nextjs'
-  import { usePaymentElement, PaymentElement } from '@clerk/nextjs/experimental'
-  import { useState } from 'react'
-
-  export function AddPaymentMethodForm() {
-    const { user } = useUser()
-    const { submit, isFormReady } = usePaymentElement()
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const [error, setError] = useState<string | null>(null)
-
-    const handleAddPaymentMethod = async (e: React.FormEvent) => {
-      e.preventDefault()
-      if (!isFormReady || !user) {
-        return
-      }
+  <CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
+    ```tsx {{ filename: 'app/user/billing/page.tsx' }}
+    import { ClerkLoaded } from '@clerk/nextjs'
+    import { PaymentElementProvider } from '@clerk/nextjs/experimental'
+    import { AddPaymentMethodForm } from './AddPaymentMethodForm'
+
+    export default function Page() {
+      return (
+        <div>
+          <h1>Billing Settings</h1>
+
+          <ClerkLoaded>
+            <PaymentElementProvider for="user">
+              <AddPaymentMethodForm />
+            </PaymentElementProvider>
+          </ClerkLoaded>
+        </div>
+      )
+    }
+    ```
+
+    ```tsx {{ filename: 'app/user/billing/AddPaymentMethodForm.tsx' }}
+    'use client'
+    import { useUser } from '@clerk/nextjs'
+    import { usePaymentElement, PaymentElement } from '@clerk/nextjs/experimental'
+    import { useState } from 'react'
+
+    export function AddPaymentMethodForm() {
+      const { user } = useUser()
+      const { submit, isFormReady } = usePaymentElement()
+      const [isSubmitting, setIsSubmitting] = useState(false)
+      const [error, setError] = useState<string | null>(null)
+
+      const handleAddPaymentMethod = async (e: React.FormEvent) => {
+        e.preventDefault()
+        if (!isFormReady || !user) {
+          return
+        }
 
-      setError(null)
-      setIsSubmitting(true)
+        setError(null)
+        setIsSubmitting(true)
 
-      try {
-        // 1. Submit the form to the payment provider to get a payment token
-        const { data, error } = await submit()
+        try {
+          // 1. Submit the form to the payment provider to get a payment token
+          const { data, error } = await submit()
 
-        // Usually a validation error from stripe that you can ignore.
-        if (error) {
-          setIsSubmitting(false)
-          return
-        }
+          // Usually a validation error from stripe that you can ignore.
+          if (error) {
+            setIsSubmitting(false)
+            return
+          }
 
-        // 2. Use the token to add the payment source to the user
-        await user.addPaymentSource(data)
+          // 2. Use the token to add the payment source to the user
+          await user.addPaymentSource(data)
 
-        // 3. Handle success (e.g., show a confirmation, clear the form)
-        alert('Payment method added successfully!')
-      } catch (err: any) {
-        setError(err.message || 'An unexpected error occurred.')
-      } finally {
-        setIsSubmitting(false)
+          // 3. Handle success (e.g., show a confirmation, clear the form)
+          alert('Payment method added successfully!')
+        } catch (err: any) {
+          setError(err.message || 'An unexpected error occurred.')
+        } finally {
+          setIsSubmitting(false)
+        }
       }
-    }
 
-    return (
-      <form onSubmit={handleAddPaymentMethod}>
-        <h3>Add a new payment method</h3>
-        <PaymentElement />
-        <button type="submit" disabled={!isFormReady || isSubmitting}>
-          {isSubmitting ? 'Saving...' : 'Save Card'}
-        </button>
-        {error && <p style={{ color: 'red' }}>{error}</p>}
-      </form>
-    )
-  }
-  ```
-</CodeBlockTabs>
+      return (
+        <form onSubmit={handleAddPaymentMethod}>
+          <h3>Add a new payment method</h3>
+          <PaymentElement />
+          <button type="submit" disabled={!isFormReady || isSubmitting}>
+            {isSubmitting ? 'Saving...' : 'Save Card'}
+          </button>
+          {error && <p style={{ color: 'red' }}>{error}</p>}
+        </form>
+      )
+    }
+    ```
+  </CodeBlockTabs>
 </If>
 
 <If sdk="react">
-<CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
-  ```tsx {{ filename: 'src/user/billing/page.tsx' }}
-  import { ClerkLoaded } from '@clerk/clerk-react'
-  import { PaymentElementProvider } from '@clerk/clerk-react/experimental'
-  import { AddPaymentMethodForm } from './AddPaymentMethodForm'
-
-  export default function Page() {
-    return (
-      <div>
-        <h1>Billing Settings</h1>
-
-        <ClerkLoaded>
-          <PaymentElementProvider for="user">
-            <AddPaymentMethodForm />
-          </PaymentElementProvider>
-        </ClerkLoaded>
-      </div>
-    )
-  }
-  ```
-
-  ```tsx {{ filename: 'src/user/billing/AddPaymentMethodForm.tsx' }}
-  import { useUser } from '@clerk/clerk-react'
-  import { usePaymentElement, PaymentElement } from '@clerk/clerk-react/experimental'
-  import { useState } from 'react'
-
-  export function AddPaymentMethodForm() {
-    const { user } = useUser()
-    const { submit, isFormReady } = usePaymentElement()
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const [error, setError] = useState<string | null>(null)
-
-    const handleAddPaymentMethod = async (e: React.FormEvent) => {
-      e.preventDefault()
-      if (!isFormReady || !user) {
-        return
-      }
+  <CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
+    ```tsx {{ filename: 'src/user/billing/page.tsx' }}
+    import { ClerkLoaded } from '@clerk/clerk-react'
+    import { PaymentElementProvider } from '@clerk/clerk-react/experimental'
+    import { AddPaymentMethodForm } from './AddPaymentMethodForm'
+
+    export default function Page() {
+      return (
+        <div>
+          <h1>Billing Settings</h1>
+
+          <ClerkLoaded>
+            <PaymentElementProvider for="user">
+              <AddPaymentMethodForm />
+            </PaymentElementProvider>
+          </ClerkLoaded>
+        </div>
+      )
+    }
+    ```
+
+    ```tsx {{ filename: 'src/user/billing/AddPaymentMethodForm.tsx' }}
+    import { useUser } from '@clerk/clerk-react'
+    import { usePaymentElement, PaymentElement } from '@clerk/clerk-react/experimental'
+    import { useState } from 'react'
+
+    export function AddPaymentMethodForm() {
+      const { user } = useUser()
+      const { submit, isFormReady } = usePaymentElement()
+      const [isSubmitting, setIsSubmitting] = useState(false)
+      const [error, setError] = useState<string | null>(null)
+
+      const handleAddPaymentMethod = async (e: React.FormEvent) => {
+        e.preventDefault()
+        if (!isFormReady || !user) {
+          return
+        }
 
-      setError(null)
-      setIsSubmitting(true)
+        setError(null)
+        setIsSubmitting(true)
 
-      try {
-        // 1. Submit the form to the payment provider to get a payment token
-        const { data, error } = await submit()
+        try {
+          // 1. Submit the form to the payment provider to get a payment token
+          const { data, error } = await submit()
 
-        // Usually a validation error from stripe that you can ignore.
-        if (error) {
-          setIsSubmitting(false)
-          return
-        }
+          // Usually a validation error from stripe that you can ignore.
+          if (error) {
+            setIsSubmitting(false)
+            return
+          }
 
-        // 2. Use the token to add the payment source to the user
-        await user.addPaymentSource(data)
+          // 2. Use the token to add the payment source to the user
+          await user.addPaymentSource(data)
 
-        // 3. Handle success (e.g., show a confirmation, clear the form)
-        alert('Payment method added successfully!')
-      } catch (err: any) {
-        setError(err.message || 'An unexpected error occurred.')
-      } finally {
-        setIsSubmitting(false)
+          // 3. Handle success (e.g., show a confirmation, clear the form)
+          alert('Payment method added successfully!')
+        } catch (err: any) {
+          setError(err.message || 'An unexpected error occurred.')
+        } finally {
+          setIsSubmitting(false)
+        }
       }
-    }
 
-    return (
-      <form onSubmit={handleAddPaymentMethod}>
-        <h3>Add a new payment method</h3>
-        <PaymentElement />
-        <button type="submit" disabled={!isFormReady || isSubmitting}>
-          {isSubmitting ? 'Saving...' : 'Save Card'}
-        </button>
-        {error && <p style={{ color: 'red' }}>{error}</p>}
-      </form>
-    )
-  }
-  ```
-</CodeBlockTabs>
-</If>
\ No newline at end of file
+      return (
+        <form onSubmit={handleAddPaymentMethod}>
+          <h3>Add a new payment method</h3>
+          <PaymentElement />
+          <button type="submit" disabled={!isFormReady || isSubmitting}>
+            {isSubmitting ? 'Saving...' : 'Save Card'}
+          </button>
+          {error && <p style={{ color: 'red' }}>{error}</p>}
+        </form>
+      )
+    }
+    ```
+  </CodeBlockTabs>
+</If>

From 54fd864ed2aae4dc5576be0b3c07ed051c747512 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Thu, 9 Oct 2025 15:45:14 -0600
Subject: [PATCH 15/32] Billing hooks typedoc

---
 docs/reference/hooks/use-checkout.mdx         | 168 ++----------------
 docs/reference/hooks/use-payment-attempts.mdx | 152 +---------------
 docs/reference/hooks/use-payment-element.mdx  |  78 +-------
 docs/reference/hooks/use-payment-methods.mdx  | 110 +-----------
 docs/reference/hooks/use-plans.mdx            | 110 +-----------
 docs/reference/hooks/use-statements.mdx       | 152 +---------------
 docs/reference/hooks/use-subscription.mdx     |  61 +------
 7 files changed, 36 insertions(+), 795 deletions(-)

diff --git a/docs/reference/hooks/use-checkout.mdx b/docs/reference/hooks/use-checkout.mdx
index 36a2e8b1fb..4d2e6df87d 100644
--- a/docs/reference/hooks/use-checkout.mdx
+++ b/docs/reference/hooks/use-checkout.mdx
@@ -13,165 +13,10 @@ There are two ways to use `useCheckout()`:
 1. In conjunction with [`<CheckoutProvider />`](#checkout-provider) to create a shared checkout context. All child components inside the provider can then use `useCheckout()` to access or update the same checkout state.
 1. On its own by passing configuration options directly to it. This is ideal for self-contained components that handle their own checkout flow without needing a shared context.
 
-## Parameters
-
-`useCheckout()` accepts a single object with the following properties:
-
-<Properties>
-  - `options?`
-  - [`UseCheckoutOptions`](#use-checkout-options)
-
-  An object containing the configuration for the checkout flow.
-
-  **Required** if the hook is used without a `<CheckoutProvider />` wrapping the component tree.
-</Properties>
-
-### `UseCheckoutOptions`
-
-<Include src="_partials/billing/use-checkout-options" />
-
-## Returns
-
-`useCheckout()` returns a `{ checkout }` object. The `checkout` object contains the following properties. They are `null` until the checkout process is started by calling the `start()` method.
-
-<Properties>
-  - `id`
-  - `string | null`
-
-  The unique identifier for the checkout session.
-
-  ---
-
-  - `externalClientSecret`
-  - `string | null`
-
-  The client secret from an external payment provider (such as Stripe) used to complete the payment on the client-side.
-
-  ---
-
-  - `externalGatewayId`
-  - `string | null`
-
-  The identifier for the external payment gateway used for the checkout session.
-
-  ---
-
-  - `paymentSource`
-  - <code>[BillingPaymentSourceResource](/docs/reference/javascript/types/billing-payment-source-resource) | null</code>
-
-  The payment source being used for the checkout.
-
-  ---
-
-  - `plan`
-  - <code>[BillingPlanResource](/docs/reference/javascript/types/billing-plan-resource) | null</code>
-
-  The subscription plan details for the checkout.
-
-  ---
-
-  - `planPeriod`
-  - `'month' | 'annual' | null`
-
-  The billing period for the plan.
-
-  ---
-
-  - `planPeriodStart`
-  - `number | undefined`
-
-  The start date of the plan period, represented as a Unix timestamp.
-
-  ---
-
-  - `status`
-  - `'needs_initialization' | 'needs_confirmation' | 'completed'`
-
-  The current status of the checkout session. The following statuses are possible:
-
-  - `needs_initialization`: The checkout hasn't started but the hook is mounted. Call `start()` to continue.
-  - `needs_confirmation`: The checkout has been initialized and is awaiting confirmation. Call `confirm()` to continue.
-  - `completed`: The checkout has been successfully confirmed. Call `finalize()` to complete the checkout.
-
-  ---
-
-  - `totals`
-  - [`BillingCheckoutTotals`](/docs/reference/javascript/types/billing-checkout-totals)
-
-  The total costs, taxes, and other pricing details.
-
-  ---
-
-  - `isImmediatePlanChange`
-  - `boolean`
-
-  A boolean that indicates if the plan change will take effect immediately.
-
-  ---
-
-  - `isStarting`
-  - `boolean`
-
-  A boolean that indicates if the `start()` method is in progress.
-
-  ---
-
-  - `isConfirming`
-  - `boolean`
-
-  A boolean that indicates if the `confirm()` method is in progress.
-
-  ---
-
-  - `error`
-  - <code>[ClerkAPIResponseError](/docs/reference/javascript/types/clerk-api-response-error) | null</code>
-
-  Returns an error object if any part of the checkout process fails.
-
-  ---
-
-  - `fetchStatus`
-  - `'idle' | 'fetching' | 'error'`
-
-  The data fetching status.
-
-  ---
-
-  - `start()`
-  - `() => Promise<{ data: BillingCheckoutResource; error: null; } | { data: null; error: ClerkAPIResponseError; }>`
-
-  A function that initializes the checkout process by creating a checkout resource on the server.
-
-  ---
-
-  - `confirm()`
-  - `(params: ConfirmCheckoutParams) => Promise<{ data: BillingCheckoutResource; error: null; } | { data: null; error: ClerkAPIResponseError; }>`
-
-  A function that confirms and finalizes the checkout process, usually after the user has provided and validated payment information.
-
-  ---
-
-  - `finalize()`
-  - `(params?: { redirectUrl: string }) => void`
-
-  A function that finalizes the checkout process. Can optionally accept a `redirectUrl` to navigate the user to upon completion.
-
-  ---
-
-  - `clear()`
-  - `() => void`
-
-  A function that clears the current checkout state from the cache.
-</Properties>
-
 ## `<CheckoutProvider />`
 
 The `<CheckoutProvider />` component is a wrapper that provides a checkout context to its children, allowing checkout state to be shared across multiple components. Child components can access the checkout context by calling `useCheckout()`.
 
-### Properties
-
-<Include src="_partials/billing/use-checkout-options" />
-
 ## Usage
 
 For the best user experience and to prevent potential errors, always wrap components using `useCheckout()` with both `<ClerkLoaded>` and `<SignedIn>` components. This ensures that the user is properly authenticated and Clerk is fully initialized before accessing checkout functionality.
@@ -528,6 +373,19 @@ The `useCheckout()` hook can be used with a context provider for managing state
   </Tab>
 </Tabs>
 
+{/* <Properties>
+  - `options?`
+  - [`UseCheckoutOptions`](#use-checkout-options)
+
+  An object containing the configuration for the checkout flow.
+
+  **Required** if the hook is used without a `<CheckoutProvider />` wrapping the component tree.
+  </Properties> */}
+
+<Typedoc src="shared/use-checkout-params" />
+
+<Typedoc src="shared/use-checkout-return" />
+
 ## Related guides
 
 <Cards>
diff --git a/docs/reference/hooks/use-payment-attempts.mdx b/docs/reference/hooks/use-payment-attempts.mdx
index d9396f8b6e..2b1ee6f2dc 100644
--- a/docs/reference/hooks/use-payment-attempts.mdx
+++ b/docs/reference/hooks/use-payment-attempts.mdx
@@ -8,154 +8,6 @@ sdk: nextjs, react
 
 The `usePaymentAttempts()` hook provides access to the payment attempts associated with a user or organization. It returns a paginated list of payment attempts and includes methods for managing them.
 
-## Parameters
-
-`usePaymentAttempts()` accepts a single object with the following properties:
-
-<Properties>
-  - `for?`
-  - `'user' | 'organization'`
-
-  Specifies whether to fetch payment attempts for the current user or organization. Defaults to `'user'`.
-
-  ---
-
-  - `pageSize?`
-  - `number`
-
-  The number of payment attempts to fetch per page. Defaults to `10`.
-
-  ---
-
-  - `initialPage?`
-  - `number`
-
-  The page number to start fetching from. Defaults to `1`.
-
-  ---
-
-  - `infinite?`
-  - `boolean`
-
-  When `true`, enables infinite pagination mode where new pages are appended to existing data. When `false`, each page replaces the previous data. Defaults to `false`.
-
-  ---
-
-  - `keepPreviousData?`
-  - `boolean`
-
-  When `true`, the previous data will be kept while loading the next page. This helps prevent layout shifts. Defaults to `false`.
-</Properties>
-
-## Returns
-
-`usePaymentAttempts()` returns an object with the following properties:
-
-<Properties>
-  - `data`
-  - <code>[BillingPaymentResource](/docs/reference/javascript/types/billing-payment-resource)\[] | null</code>
-
-  An array of payment attempts, or `null` if the data hasn't been loaded yet.
-
-  ---
-
-  - `isLoading`
-  - `boolean`
-
-  A boolean that is `true` if there is an ongoing request and there is no fetched data.
-
-  ---
-
-  - `isFetching`
-  - `boolean`
-
-  A boolean that is `true` if there is an ongoing request or a revalidation.
-
-  ---
-
-  - `hasNextPage`
-  - `boolean`
-
-  A boolean that indicates if there are available pages to be fetched.
-
-  ---
-
-  - `hasPreviousPage`
-  - `boolean`
-
-  A boolean that indicates if there are available pages to be fetched.
-
-  ---
-
-  - `fetchNext`
-  - <code>() => void</code>
-
-  A function that triggers the next page to be loaded. This is the same as `fetchPage(page => Math.min(pageCount, page + 1))`.
-
-  ---
-
-  - `fetchPrevious`
-  - <code>() => void</code>
-
-  A function that triggers the previous page to be loaded. This is the same as `fetchPage(page => Math.max(0, page - 1))`.
-
-  ---
-
-  - `pageCount`
-  - `number`
-
-  The total amount of pages. It is calculated based on `count`, `initialPage`, and `pageSize`.
-
-  ---
-
-  - `count`
-  - `number`
-
-  The total number of payment attempts available.
-
-  ---
-
-  - `error`
-  - <code>[ClerkAPIResponseError](/docs/reference/javascript/types/clerk-api-response-error) | null</code>
-
-  Returns an error object if any part of the process fails.
-
-  ---
-
-  - `fetchPage`
-  - `(page: number) => void`
-
-  A function that triggers a specific page to be loaded.
-
-  ---
-
-  - `isError`
-  - `boolean`
-
-  A boolean that indicates the request failed.
-
-  ---
-
-  - `page`
-  - `number`
-
-  The current page.
-
-  ---
-
-  - `revalidate`
-  - <code>() => Promise\<void></code>
-
-  A function that triggers a revalidation of the current page.
-
-  ---
-
-  - `setData`
-  - `(data: any[]) => void`
-
-  A function that allows you to set the data manually.
-</Properties>
-
 ## Examples
 
 ### Basic usage
@@ -435,3 +287,7 @@ The following example demonstrates how to use `usePaymentAttempts()` to display
   }
   ```
 </If>
+
+<Typedoc src="shared/hook-params" />
+
+<Typedoc src="shared/use-payment-attempts-return" />
diff --git a/docs/reference/hooks/use-payment-element.mdx b/docs/reference/hooks/use-payment-element.mdx
index 92ceef79e0..9d50c81cc5 100644
--- a/docs/reference/hooks/use-payment-element.mdx
+++ b/docs/reference/hooks/use-payment-element.mdx
@@ -14,44 +14,7 @@ This hook must be used within a component that is a descendant of the `<PaymentE
 
 `usePaymentElement()` doesn't accept any parameters. It derives its state and configuration from the nearest [`<PaymentElementProvider />`](#payment-element-provider).
 
-## Returns
-
-`usePaymentElement()` returns an object with the following properties:
-
-<Properties>
-  - `submit()`
-  - `() => Promise<{ data: { gateway: 'stripe'; paymentToken: string } | null; error: PaymentElementError | null}>`
-
-  A function that submits the payment form data to the payment provider. It returns a promise that resolves with either a `data` object containing a payment token on success, or an `error` object on failure.
-
-  ---
-
-  - `reset()`
-  - `() => Promise<void>`
-
-  A function that resets the payment form to its initial, empty state.
-
-  ---
-
-  - `isFormReady`
-  - `boolean`
-
-  A boolean that indicates if the payment form UI has been rendered and is ready for user input. This is useful for disabling a submit button until the form is interactive.
-
-  ---
-
-  - `isProviderReady`
-  - `boolean`
-
-  A boolean that indicates if the underlying payment provider (e.g. Stripe) has been fully initialized.
-
-  ---
-
-  - `provider`
-  - `{ name: 'stripe' } | undefined`
-
-  An object containing information about the initialized payment provider. It is `undefined` until `isProviderReady` is `true`.
-</Properties>
+<Typedoc src="shared/use-payment-element-return" />
 
 ## Payment element components
 
@@ -61,48 +24,13 @@ The `usePaymentElement()` hook works in conjunction with the `<PaymentElementPro
 
 The `<PaymentElementProvider />` component sets up the context for the payment element. It fetches all the necessary data from the payment provider (e.g., Stripe) and makes it available to its children.
 
-#### Properties
-
-<Properties>
-  - `checkout?`
-  - [`BillingCheckoutResource`](/docs/reference/javascript/types/billing-checkout-resource)
-
-  An optional checkout resource object. When provided, the payment element is scoped to the specific checkout session.
-
-  ---
-
-  - `for?`
-  - `'user' | 'organization'`
-
-  Specifies whether the payment method is being added for a user or an organization. Defaults to `'user'`.
-
-  ---
-
-  - `stripeAppearance?`
-  - `object`
-
-  An optional object to customize the appearance of the Stripe Payment Element. This allows you to match the form's styling to your application's theme.
-
-  ---
-
-  - `paymentDescription?`
-  - `string`
-
-  An optional description to display to the user within the payment element UI.
-</Properties>
+<Typedoc src="shared/payment-element-provider-props" />
 
 ### `<PaymentElement />`
 
 This component renders the actual payment form from the provider (e.g., the Stripe Payment Element). It should be rendered as a child of `<PaymentElementProvider />`.
 
-#### Properties
-
-<Properties>
-  - `fallback?`
-  - `ReactNode`
-
-  Optional fallback content, such as a loading skeleton, to display while the payment form is being initialized.
-</Properties>
+<Typedoc src="shared/payment-element-props" />
 
 ## Examples
 
diff --git a/docs/reference/hooks/use-payment-methods.mdx b/docs/reference/hooks/use-payment-methods.mdx
index 65acb72c1e..20ffb32058 100644
--- a/docs/reference/hooks/use-payment-methods.mdx
+++ b/docs/reference/hooks/use-payment-methods.mdx
@@ -8,112 +8,6 @@ sdk: nextjs, react
 
 The `usePaymentMethods()` hook provides access to the payment methods associated with a user or organization. It returns a paginated list of payment methods and includes methods for managing them.
 
-## Parameters
-
-`usePaymentMethods()` accepts a single object with the following properties:
-
-<Properties>
-  - `for?`
-  - `'user' | 'organization'`
-
-  Specifies whether to fetch payment methods for the current user or organization. Defaults to `'user'`.
-
-  ---
-
-  - `pageSize?`
-  - `number`
-
-  The number of payment methods to fetch per page. Defaults to `10`.
-
-  ---
-
-  - `initialPage?`
-  - `number`
-
-  The page number to start fetching from. Defaults to `1`.
-
-  ---
-
-  - `infinite?`
-  - `boolean`
-
-  When `true`, enables infinite pagination mode where new pages are appended to existing data. When `false`, each page replaces the previous data. Defaults to `false`.
-
-  ---
-
-  - `keepPreviousData?`
-  - `boolean`
-
-  When `true`, the previous data will be kept while loading the next page. This helps prevent layout shifts. Defaults to `false`.
-</Properties>
-
-## Returns
-
-`usePaymentMethods()` returns an object with the following properties:
-
-<Properties>
-  - `data`
-  - <code>[BillingPaymentSourceResource](/docs/reference/javascript/types/billing-payment-source-resource)\[] | null</code>
-
-  An array of [payment methods](/docs/reference/javascript/types/billing-payment-source-resource), or `null` if the data hasn't been loaded yet.
-
-  ---
-
-  - `isLoading`
-  - `boolean`
-
-  A boolean that indicates whether the initial data is still being fetched.
-
-  ---
-
-  - `isFetching`
-  - `boolean`
-
-  A boolean that indicates whether any request is still in flight, including background updates.
-
-  ---
-
-  - `hasNextPage`
-  - `boolean`
-
-  A boolean that indicates whether there are more pages available to load.
-
-  ---
-
-  - `hasPreviousPage`
-  - `boolean`
-
-  A boolean that indicates whether there are previous pages available to load.
-
-  ---
-
-  - `fetchNext`
-  - `() => Promise<void>`
-
-  A function to fetch the next page of payment methods.
-
-  ---
-
-  - `fetchPrevious`
-  - `() => Promise<void>`
-
-  A function to fetch the previous page of payment methods.
-
-  ---
-
-  - `pageCount`
-  - `number`
-
-  The total number of available pages.
-
-  ---
-
-  - `count`
-  - `number`
-
-  The total number of payment methods available.
-</Properties>
-
 ## Examples
 
 ### Basic usage
@@ -358,6 +252,10 @@ The following example demonstrates how to use `usePaymentMethods()` in a checkou
   ```
 </If>
 
+<Typedoc src="shared/hook-params" />
+
+<Typedoc src="shared/use-payment-methods-return" />
+
 ## Related guides
 
 <Cards>
diff --git a/docs/reference/hooks/use-plans.mdx b/docs/reference/hooks/use-plans.mdx
index 07bc894fb2..403b7199ed 100644
--- a/docs/reference/hooks/use-plans.mdx
+++ b/docs/reference/hooks/use-plans.mdx
@@ -8,112 +8,6 @@ sdk: nextjs, react
 
 The `usePlans()` hook provides access to the subscription plans available in your application. It returns a paginated list of plans and includes methods for managing them.
 
-## Parameters
-
-`usePlans()` accepts a single object with the following properties:
-
-<Properties>
-  - `for?`
-  - `'user' | 'organization'`
-
-  Specifies whether to fetch plans for users or organizations. Defaults to `'user'`.
-
-  ---
-
-  - `pageSize?`
-  - `number`
-
-  The number of plans to fetch per page. Defaults to `10`.
-
-  ---
-
-  - `initialPage?`
-  - `number`
-
-  The page number to start fetching from. Defaults to `1`.
-
-  ---
-
-  - `infinite?`
-  - `boolean`
-
-  When `true`, enables infinite pagination mode where new pages are appended to existing data. When `false`, each page replaces the previous data. Defaults to `false`.
-
-  ---
-
-  - `keepPreviousData?`
-  - `boolean`
-
-  When `true`, the previous data will be kept while loading the next page. This helps prevent layout shifts. Defaults to `false`.
-</Properties>
-
-## Returns
-
-`usePlans()` returns an object with the following properties:
-
-<Properties>
-  - `data`
-  - <code>[`BillingPlanResource[]`](/docs/reference/javascript/types/billing-plan-resource) | null</code>
-
-  An array of [plans](/docs/reference/javascript/types/billing-plan-resource), or `null` if the data hasn't been loaded yet.
-
-  ---
-
-  - `isLoading`
-  - `boolean`
-
-  A boolean that indicates whether the initial data is still being fetched.
-
-  ---
-
-  - `isFetching`
-  - `boolean`
-
-  A boolean that indicates whether any request is still in flight, including background updates.
-
-  ---
-
-  - `hasNextPage`
-  - `boolean`
-
-  A boolean that indicates whether there are more pages available to load.
-
-  ---
-
-  - `hasPreviousPage`
-  - `boolean`
-
-  A boolean that indicates whether there are previous pages available to load.
-
-  ---
-
-  - `fetchNext`
-  - `() => Promise<void>`
-
-  A function to fetch the next page of plans.
-
-  ---
-
-  - `fetchPrevious`
-  - `() => Promise<void>`
-
-  A function to fetch the previous page of plans.
-
-  ---
-
-  - `pageCount`
-  - `number`
-
-  The total number of available pages.
-
-  ---
-
-  - `count`
-  - `number`
-
-  The total number of plans available.
-</Properties>
-
 ## Examples
 
 ### Basic usage
@@ -309,3 +203,7 @@ The following example demonstrates how to implement infinite scrolling with plan
   }
   ```
 </If>
+
+<Typedoc src="shared/hook-params" />
+
+<Typedoc src="shared/use-plans-return" />
diff --git a/docs/reference/hooks/use-statements.mdx b/docs/reference/hooks/use-statements.mdx
index c4062232c2..de4a7ddbda 100644
--- a/docs/reference/hooks/use-statements.mdx
+++ b/docs/reference/hooks/use-statements.mdx
@@ -8,154 +8,6 @@ sdk: nextjs, react
 
 The `useStatements()` hook provides access to the statements associated with a user or organization. It returns a paginated list of statements and includes methods for managing them.
 
-## Parameters
-
-`useStatements()` accepts a single object with the following properties:
-
-<Properties>
-  - `for?`
-  - `'user' | 'organization'`
-
-  Specifies whether to fetch statements for the current user or organization. Defaults to `'user'`.
-
-  ---
-
-  - `pageSize?`
-  - `number`
-
-  The number of statements to fetch per page. Defaults to `10`.
-
-  ---
-
-  - `initialPage?`
-  - `number`
-
-  The page number to start fetching from. Defaults to `1`.
-
-  ---
-
-  - `infinite?`
-  - `boolean`
-
-  When `true`, enables infinite pagination mode where new pages are appended to existing data. When `false`, each page replaces the previous data. Defaults to `false`.
-
-  ---
-
-  - `keepPreviousData?`
-  - `boolean`
-
-  When `true`, the previous data will be kept while loading the next page. This helps prevent layout shifts. Defaults to `false`.
-</Properties>
-
-## Returns
-
-`useStatements()` returns an object with the following properties:
-
-<Properties>
-  - `data`
-  - <code>[BillingStatementResource](/docs/reference/javascript/types/billing-statement-resource)\[] | null</code>
-
-  An array of statements, or `null` if the data hasn't been loaded yet.
-
-  ---
-
-  - `isLoading`
-  - `boolean`
-
-  A boolean that is `true` if there is an ongoing request and there is no fetched data.
-
-  ---
-
-  - `isFetching`
-  - `boolean`
-
-  A boolean that is `true` if there is an ongoing request or a revalidation.
-
-  ---
-
-  - `hasNextPage`
-  - `boolean`
-
-  A boolean that indicates if there are available pages to be fetched.
-
-  ---
-
-  - `hasPreviousPage`
-  - `boolean`
-
-  A boolean that indicates if there are available pages to be fetched.
-
-  ---
-
-  - `fetchNext`
-  - <code>() => void</code>
-
-  A function that triggers the next page to be loaded. This is the same as `fetchPage(page => Math.min(pageCount, page + 1))`.
-
-  ---
-
-  - `fetchPrevious`
-  - <code>() => void</code>
-
-  A function that triggers the previous page to be loaded. This is the same as `fetchPage(page => Math.max(0, page - 1))`.
-
-  ---
-
-  - `pageCount`
-  - `number`
-
-  The total amount of pages. It is calculated based on `count`, `initialPage`, and `pageSize`.
-
-  ---
-
-  - `count`
-  - `number`
-
-  The total number of statements available.
-
-  ---
-
-  - `error`
-  - <code>[ClerkAPIResponseError](/docs/reference/javascript/types/clerk-api-response-error) | null</code>
-
-  Returns an error object if any part of the process fails.
-
-  ---
-
-  - `fetchPage`
-  - `(page: number) => void`
-
-  A function that triggers a specific page to be loaded.
-
-  ---
-
-  - `isError`
-  - `boolean`
-
-  A boolean that indicates the request failed.
-
-  ---
-
-  - `page`
-  - `number`
-
-  The current page.
-
-  ---
-
-  - `revalidate`
-  - <code>() => Promise\<void></code>
-
-  A function that triggers a revalidation of the current page.
-
-  ---
-
-  - `setData`
-  - `(data: any[]) => void`
-
-  A function that allows you to set the data manually.
-</Properties>
-
 ## Examples
 
 ### Basic usage
@@ -311,3 +163,7 @@ The following example demonstrates how to implement infinite scrolling with stat
   }
   ```
 </If>
+
+<Typedoc src="shared/hook-params" />
+
+<Typedoc src="shared/use-statements-return" />
diff --git a/docs/reference/hooks/use-subscription.mdx b/docs/reference/hooks/use-subscription.mdx
index 9aed0e5c73..bd0d84e9dc 100644
--- a/docs/reference/hooks/use-subscription.mdx
+++ b/docs/reference/hooks/use-subscription.mdx
@@ -11,63 +11,6 @@ The `useSubscription()` hook provides access to subscription information for use
 > [!WARNING]
 > The `useSubscription()` hook should only be used for accessing and displaying subscription information. For authorization purposes (i.e., controlling access to features or content), use the [`has()`](/docs/guides/secure/authorization-checks#use-has-for-authorization-checks) helper or the [`<Protect>`](/docs/reference/components/control/protect) component instead.
 
-## Parameters
-
-`useSubscription()` accepts a single optional object with the following properties:
-
-<Properties>
-  - `for?`
-  - `'organization' | 'user'`
-
-  Specifies whether to fetch subscription for an organization or user. Defaults to `'user'`.
-
-  ---
-
-  - `keepPreviousData?`
-  - `boolean`
-
-  When `true`, the previous data will be kept in the cache until new data is fetched. This helps prevent layout shifts. Defaults to `false`.
-</Properties>
-
-## Returns
-
-`useSubscription()` returns an object with the following properties:
-
-<Properties>
-  - `data`
-  - <code>[`BillingSubscriptionResource`](/docs/reference/javascript/types/billing-subscription-resource) | null</code>
-
-  The subscription object, or `null` if the data hasn't been loaded yet.
-
-  ---
-
-  - `isLoading`
-  - `boolean`
-
-  A boolean that indicates whether the initial data is still being fetched.
-
-  ---
-
-  - `isFetching`
-  - `boolean`
-
-  A boolean that indicates whether any request is still in flight, including background updates.
-
-  ---
-
-  - `error`
-  - `Error | null`
-
-  Any error that occurred during the data fetch, or `null` if no error occurred.
-
-  ---
-
-  - `revalidate`
-  - `() => Promise<void>`
-
-  Function to manually trigger a refresh of the subscription data.
-</Properties>
-
 ## Examples
 
 ### Basic usage
@@ -437,3 +380,7 @@ The following example shows how to handle subscription data with proper error st
   }
   ```
 </If>
+
+<Typedoc src="shared/use-subscription-params" />
+
+<Typedoc src="shared/use-subscription-return" />

From 6bd65ae33e6985286dabbec15fccc02ef3bd5f93 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Thu, 9 Oct 2025 19:34:58 -0600
Subject: [PATCH 16/32] Add headings for billing hooks

---
 docs/reference/hooks/use-checkout.mdx         | 13 ++++++-------
 docs/reference/hooks/use-payment-attempts.mdx |  8 ++++++++
 docs/reference/hooks/use-payment-element.mdx  |  4 ++++
 docs/reference/hooks/use-payment-methods.mdx  |  8 ++++++++
 docs/reference/hooks/use-plans.mdx            |  8 ++++++++
 docs/reference/hooks/use-statements.mdx       |  8 ++++++++
 docs/reference/hooks/use-subscription.mdx     |  8 ++++++++
 7 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/docs/reference/hooks/use-checkout.mdx b/docs/reference/hooks/use-checkout.mdx
index 4d2e6df87d..f75c00691a 100644
--- a/docs/reference/hooks/use-checkout.mdx
+++ b/docs/reference/hooks/use-checkout.mdx
@@ -373,17 +373,16 @@ The `useCheckout()` hook can be used with a context provider for managing state
   </Tab>
 </Tabs>
 
-{/* <Properties>
-  - `options?`
-  - [`UseCheckoutOptions`](#use-checkout-options)
+## Properties
 
-  An object containing the configuration for the checkout flow.
-
-  **Required** if the hook is used without a `<CheckoutProvider />` wrapping the component tree.
-  </Properties> */}
+`useCheckout()` accepts a single object that is required if the hook is used without a `<CheckoutProvider />` wrapping the component tree. It contains the following properties:
 
 <Typedoc src="shared/use-checkout-params" />
 
+## Returns
+
+`useCheckout()` returns a `{ checkout }` object. The `checkout` object contains the following properties. They are `null` until the checkout process is started by calling the `start()` method.
+
 <Typedoc src="shared/use-checkout-return" />
 
 ## Related guides
diff --git a/docs/reference/hooks/use-payment-attempts.mdx b/docs/reference/hooks/use-payment-attempts.mdx
index 2b1ee6f2dc..cbd4750256 100644
--- a/docs/reference/hooks/use-payment-attempts.mdx
+++ b/docs/reference/hooks/use-payment-attempts.mdx
@@ -288,6 +288,14 @@ The following example demonstrates how to use `usePaymentAttempts()` to display
   ```
 </If>
 
+## Properties
+
+`usePaymentAttempts()` accepts a single optional object with the following properties:
+
 <Typedoc src="shared/hook-params" />
 
+## Returns
+
+`usePaymentAttempts()` returns an object with the following properties:
+
 <Typedoc src="shared/use-payment-attempts-return" />
diff --git a/docs/reference/hooks/use-payment-element.mdx b/docs/reference/hooks/use-payment-element.mdx
index 9d50c81cc5..fa4ebf8b20 100644
--- a/docs/reference/hooks/use-payment-element.mdx
+++ b/docs/reference/hooks/use-payment-element.mdx
@@ -14,6 +14,10 @@ This hook must be used within a component that is a descendant of the `<PaymentE
 
 `usePaymentElement()` doesn't accept any parameters. It derives its state and configuration from the nearest [`<PaymentElementProvider />`](#payment-element-provider).
 
+## Returns
+
+`usePaymentElement()` returns an object with the following properties:
+
 <Typedoc src="shared/use-payment-element-return" />
 
 ## Payment element components
diff --git a/docs/reference/hooks/use-payment-methods.mdx b/docs/reference/hooks/use-payment-methods.mdx
index 20ffb32058..9ee6cb0605 100644
--- a/docs/reference/hooks/use-payment-methods.mdx
+++ b/docs/reference/hooks/use-payment-methods.mdx
@@ -252,8 +252,16 @@ The following example demonstrates how to use `usePaymentMethods()` in a checkou
   ```
 </If>
 
+## Properties
+
+`usePaymentMethods()` accepts a single optional object with the following properties:
+
 <Typedoc src="shared/hook-params" />
 
+## Returns
+
+`usePaymentMethods()` returns an object with the following properties:
+
 <Typedoc src="shared/use-payment-methods-return" />
 
 ## Related guides
diff --git a/docs/reference/hooks/use-plans.mdx b/docs/reference/hooks/use-plans.mdx
index 403b7199ed..f411536b0f 100644
--- a/docs/reference/hooks/use-plans.mdx
+++ b/docs/reference/hooks/use-plans.mdx
@@ -204,6 +204,14 @@ The following example demonstrates how to implement infinite scrolling with plan
   ```
 </If>
 
+## Properties
+
+`usePlans()` accepts a single optional object with the following properties:
+
 <Typedoc src="shared/hook-params" />
 
+## Returns
+
+`usePlans()` returns an object with the following properties:
+
 <Typedoc src="shared/use-plans-return" />
diff --git a/docs/reference/hooks/use-statements.mdx b/docs/reference/hooks/use-statements.mdx
index de4a7ddbda..3ca865d625 100644
--- a/docs/reference/hooks/use-statements.mdx
+++ b/docs/reference/hooks/use-statements.mdx
@@ -164,6 +164,14 @@ The following example demonstrates how to implement infinite scrolling with stat
   ```
 </If>
 
+## Properties
+
+`useStatements()` accepts a single optional object with the following properties:
+
 <Typedoc src="shared/hook-params" />
 
+## Returns
+
+`useStatements()` returns an object with the following properties:
+
 <Typedoc src="shared/use-statements-return" />
diff --git a/docs/reference/hooks/use-subscription.mdx b/docs/reference/hooks/use-subscription.mdx
index bd0d84e9dc..d7185f201c 100644
--- a/docs/reference/hooks/use-subscription.mdx
+++ b/docs/reference/hooks/use-subscription.mdx
@@ -381,6 +381,14 @@ The following example shows how to handle subscription data with proper error st
   ```
 </If>
 
+## Properties
+
+`useSubscription()` accepts a single optional object with the following properties:
+
 <Typedoc src="shared/use-subscription-params" />
 
+## Returns
+
+`useSubscription()` returns an object with the following properties:
+
 <Typedoc src="shared/use-subscription-return" />

From 6916dcbfbfcd636046bffdf8a9f1efebf3dd93e8 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Fri, 10 Oct 2025 14:44:03 -0600
Subject: [PATCH 17/32] Fix some issues billing hooks

---
 docs/reference/hooks/use-checkout.mdx        | 10 ++-
 docs/reference/hooks/use-payment-element.mdx |  2 +-
 docs/reference/hooks/use-reverification.mdx  | 44 +----------
 docs/reference/hooks/use-subscription.mdx    | 83 +-------------------
 4 files changed, 13 insertions(+), 126 deletions(-)

diff --git a/docs/reference/hooks/use-checkout.mdx b/docs/reference/hooks/use-checkout.mdx
index f75c00691a..637bbcb653 100644
--- a/docs/reference/hooks/use-checkout.mdx
+++ b/docs/reference/hooks/use-checkout.mdx
@@ -17,6 +17,10 @@ There are two ways to use `useCheckout()`:
 
 The `<CheckoutProvider />` component is a wrapper that provides a checkout context to its children, allowing checkout state to be shared across multiple components. Child components can access the checkout context by calling `useCheckout()`.
 
+## Properties
+
+<Typedoc src="shared/use-checkout-options" />
+
 ## Usage
 
 For the best user experience and to prevent potential errors, always wrap components using `useCheckout()` with both `<ClerkLoaded>` and `<SignedIn>` components. This ensures that the user is properly authenticated and Clerk is fully initialized before accessing checkout functionality.
@@ -373,11 +377,11 @@ The `useCheckout()` hook can be used with a context provider for managing state
   </Tab>
 </Tabs>
 
-## Properties
+<Typedoc src="clerk-react/experimental_use-checkout-params" />
 
-`useCheckout()` accepts a single object that is required if the hook is used without a `<CheckoutProvider />` wrapping the component tree. It contains the following properties:
+## `UseCheckoutOptions`
 
-<Typedoc src="shared/use-checkout-params" />
+<Typedoc src="shared/use-checkout-options" />
 
 ## Returns
 
diff --git a/docs/reference/hooks/use-payment-element.mdx b/docs/reference/hooks/use-payment-element.mdx
index fa4ebf8b20..e1ef10b5c2 100644
--- a/docs/reference/hooks/use-payment-element.mdx
+++ b/docs/reference/hooks/use-payment-element.mdx
@@ -36,7 +36,7 @@ This component renders the actual payment form from the provider (e.g., the Stri
 
 <Typedoc src="shared/payment-element-props" />
 
-## Examples
+## Example
 
 <Include src="_partials/billing/add-new-payment-method" />
 
diff --git a/docs/reference/hooks/use-reverification.mdx b/docs/reference/hooks/use-reverification.mdx
index 6dfb5ce007..ecd6feb056 100644
--- a/docs/reference/hooks/use-reverification.mdx
+++ b/docs/reference/hooks/use-reverification.mdx
@@ -1983,50 +1983,12 @@ The `useReverification()` hook displays a prebuilt UI when the user needs to rev
   </Tab>
 </Tabs>
 
-## Properties
-
-<Properties>
-  - `fetcher`
-  - `Fetcher extends (...args: any[]) => Promise<any>`
-
-  A function that returns a promise.
-
-  ---
-
-  - `options?`
-  - [`UseReverificationOptions`](#use-reverification-options)
-
-  The optional options object.
-</Properties>
+<Typedoc src="clerk-react/use-reverification-params" />
 
 ### `UseReverificationOptions`
 
-<Properties>
-  - `onNeedsReverification?`
-  - <code>(\{ complete, cancel, level }: [NeedsReverificationParameters](#needs-reverification-parameters)) => void</code>
-
-  Handler for the reverification process. Opts out of using the default UI. Use this to build a custom UI.
-</Properties>
+<Typedoc src="shared/use-reverification-options" />
 
 ### `NeedsReverificationParameters`
 
-<Properties>
-  - `complete`
-  - `() => void`
-
-  Marks the reverification process as complete and retries the original request.
-
-  ---
-
-  - `cancel`
-  - `() => void`
-
-  Marks the reverification process as cancelled and rejects the original request.
-
-  ---
-
-  - `level`
-  - `"first_factor" | "second_factor" | "multi_factor" | undefined`
-
-  The verification level required for the reverification process.
-</Properties>
+<Typedoc src="shared/needs-reverification-parameters" />
diff --git a/docs/reference/hooks/use-subscription.mdx b/docs/reference/hooks/use-subscription.mdx
index d7185f201c..b7c5d53f9e 100644
--- a/docs/reference/hooks/use-subscription.mdx
+++ b/docs/reference/hooks/use-subscription.mdx
@@ -146,86 +146,7 @@ The following example shows how to fetch an organization's subscription.
 The following example shows how to handle subscription data with proper error states.
 
 <If sdk="nextjs">
-  ```tsx {{ filename: 'app/pricing/subscription-details/page.tsx' }}
-  'use client'
-  import { useSubscription } from '@clerk/nextjs/experimental'
-
-  function SubscriptionDetails() {
-    const { data: subscription, isLoading } = useSubscription()
-
-    if (isLoading) {
-      return <div>Loading subscription...</div>
-    }
-
-    if (!subscription) {
-      return <div>No subscription</div>
-    }
-
-    return (
-      <div className="subscription-details">
-        <h2>Subscription Details</h2>
-        <div className="status">
-          Status: <span className={`status-${subscription.status}`}>{subscription.status}</span>
-        </div>
-
-        <div className="dates">
-          <p>Active since: {subscription.activeAt.toLocaleDateString()}</p>
-          {subscription.pastDueAt && (
-            <p className="warning">Past due since: {subscription.pastDueAt.toLocaleDateString()}</p>
-          )}
-        </div>
-
-        {subscription.nextPayment && (
-          <div className="next-payment">
-            <h3>Next Payment</h3>
-            <p>Amount: {subscription.nextPayment.amount.amountFormatted}</p>
-            <p>Due: {subscription.nextPayment.date.toLocaleDateString()}</p>
-          </div>
-        )}
-
-        <div className="subscription-items">
-          <h3>Subscription Items</h3>
-          <ul>
-            {subscription.subscriptionItems.map((item) => (
-              <li key={item.id}>{/* Display subscription item details */}</li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    )
-  }
-
-  export default function Page() {
-    const { data, isLoading, error, isFetching, revalidate } = useSubscription()
-
-    if (error) {
-      return (
-        <div className="error-state">
-          <h3>Failed to load subscription</h3>
-          <p>{error.message}</p>
-          <button onClick={revalidate}>Try Again</button>
-        </div>
-      )
-    }
-
-    return (
-      <div className="subscription-status">
-        {isLoading ? (
-          <div>Loading...</div>
-        ) : (
-          <>
-            <div className="status-indicator">{isFetching && <span>Refreshing...</span>}</div>
-            {data ? <SubscriptionDetails /> : <div>No active subscription</div>}
-          </>
-        )}
-      </div>
-    )
-  }
-  ```
-</If>
-
-<If sdk="nextjs">
-  ```tsx {{ filename: 'app/pricing/subscription-details/page.tsx' }}
+  ```tsx {{ filename: 'app/pricing/subscription-details/page.tsx', collapsible: true }}
   'use client'
   import { useSubscription } from '@clerk/nextjs/experimental'
 
@@ -304,7 +225,7 @@ The following example shows how to handle subscription data with proper error st
 </If>
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/pricing/subscription-details/page.tsx' }}
+  ```tsx {{ filename: 'src/pricing/subscription-details/page.tsx', collapsible: true }}
   import { useSubscription } from '@clerk/clerk-react/experimental'
 
   function SubscriptionDetails() {

From 7733c65efd95b5e2d6af2c7faed54eadc3b922cf Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Mon, 13 Oct 2025 16:15:14 -0600
Subject: [PATCH 18/32] Refine code examples afte testing

---
 .../billing/add-new-payment-method.mdx        |  4 +-
 docs/reference/hooks/use-auth.mdx             |  4 +-
 docs/reference/hooks/use-checkout.mdx         |  2 +
 docs/reference/hooks/use-clerk.mdx            |  7 ++-
 docs/reference/hooks/use-organization.mdx     |  4 +-
 docs/reference/hooks/use-session-list.mdx     |  9 ++-
 docs/reference/hooks/use-session.mdx          |  6 +-
 docs/reference/hooks/use-sign-in.mdx          | 15 ++++-
 docs/reference/hooks/use-sign-up.mdx          | 15 ++++-
 docs/reference/hooks/use-subscription.mdx     |  2 +-
 docs/reference/hooks/use-user.mdx             | 61 ++++++++++++++-----
 11 files changed, 94 insertions(+), 35 deletions(-)

diff --git a/docs/_partials/billing/add-new-payment-method.mdx b/docs/_partials/billing/add-new-payment-method.mdx
index ca4d52d839..df9ad1ec94 100644
--- a/docs/_partials/billing/add-new-payment-method.mdx
+++ b/docs/_partials/billing/add-new-payment-method.mdx
@@ -85,7 +85,7 @@ The following example demonstrates how to create a billing page where a user can
 
 <If sdk="react">
   <CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
-    ```tsx {{ filename: 'src/user/billing/page.tsx' }}
+    ```tsx {{ filename: 'src/pages/user/billing/page.tsx' }}
     import { ClerkLoaded } from '@clerk/clerk-react'
     import { PaymentElementProvider } from '@clerk/clerk-react/experimental'
     import { AddPaymentMethodForm } from './AddPaymentMethodForm'
@@ -105,7 +105,7 @@ The following example demonstrates how to create a billing page where a user can
     }
     ```
 
-    ```tsx {{ filename: 'src/user/billing/AddPaymentMethodForm.tsx' }}
+    ```tsx {{ filename: 'src/pages/user/billing/AddPaymentMethodForm.tsx' }}
     import { useUser } from '@clerk/clerk-react'
     import { usePaymentElement, PaymentElement } from '@clerk/clerk-react/experimental'
     import { useState } from 'react'
diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index 799838c466..6590abd5a5 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -230,9 +230,9 @@ The following example demonstrates how to use the `useAuth()` hook to access the
   </If> */}
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/external-data/page.tsx' }}
+  ```tsx {{ filename: 'app/(auth)/external-data.tsx' }}
   import { useAuth } from '@clerk/clerk-expo'
-  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+  import { Text, View, TouchableOpacity } from 'react-native'
 
   export default function ExternalDataPage() {
     const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
diff --git a/docs/reference/hooks/use-checkout.mdx b/docs/reference/hooks/use-checkout.mdx
index 637bbcb653..cc03ec2a83 100644
--- a/docs/reference/hooks/use-checkout.mdx
+++ b/docs/reference/hooks/use-checkout.mdx
@@ -102,6 +102,7 @@ The `useCheckout()` hook can be used with a context provider for managing state
           'use client'
 
           import { useCheckout } from '@clerk/nextjs/experimental'
+          import { useState } from 'react'
 
           export function CheckoutFlow() {
             const { checkout } = useCheckout()
@@ -192,6 +193,7 @@ The `useCheckout()` hook can be used with a context provider for managing state
         <If sdk="react">
           ```tsx {{ filename: 'src/components/CheckoutFlow.tsx', collapsible: true }}
           import { useCheckout } from '@clerk/clerk-react/experimental'
+          import { useState } from 'react'
 
           export function CheckoutFlow() {
             const { checkout } = useCheckout()
diff --git a/docs/reference/hooks/use-clerk.mdx b/docs/reference/hooks/use-clerk.mdx
index 5221383944..df615bf401 100644
--- a/docs/reference/hooks/use-clerk.mdx
+++ b/docs/reference/hooks/use-clerk.mdx
@@ -66,6 +66,11 @@ The following example uses the `useClerk()` hook to access the `clerk` object. T
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useClerk } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/')({
+    component: Home,
+  })
 
   export default function Home() {
     const clerk = useClerk()
@@ -76,7 +81,7 @@ The following example uses the `useClerk()` hook to access the `clerk` object. T
 </If>
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/(clerk)/page.tsx' }}
   import { useClerk } from '@clerk/clerk-expo'
   import { Text, View, TouchableOpacity } from 'react-native'
 
diff --git a/docs/reference/hooks/use-organization.mdx b/docs/reference/hooks/use-organization.mdx
index bbe695eaec..3cd8e00a4c 100644
--- a/docs/reference/hooks/use-organization.mdx
+++ b/docs/reference/hooks/use-organization.mdx
@@ -44,7 +44,7 @@ const { invitations } = useOrganization({
 The following example demonstrates how to use the `infinite` property to fetch and append new data to the existing list. The `memberships` attribute will be populated with the first page of the organization's memberships. When the "Load more" button is clicked, the `fetchNext` helper function will be called to append the next page of memberships to the list.
 
 <If sdk="react">
-  ```jsx {{ filename: 'components/MemberList.tsx' }}
+  ```jsx {{ filename: 'src/components/MemberList.tsx' }}
   import { useOrganization } from '@clerk/clerk-react'
 
   export default function MemberList() {
@@ -347,7 +347,7 @@ The following example demonstrates how to use the `fetchPrevious` and `fetchNext
 Notice the difference between this example's pagination and the infinite pagination example above.
 
 <If sdk="react">
-  ```jsx {{ filename: 'components/MemberList.tsx' }}
+  ```jsx {{ filename: 'src/components/MemberList.tsx' }}
   import { useOrganization } from '@clerk/clerk-react'
 
   export default function MemberList() {
diff --git a/docs/reference/hooks/use-session-list.mdx b/docs/reference/hooks/use-session-list.mdx
index a2da5c5ecd..71812d6d00 100644
--- a/docs/reference/hooks/use-session-list.mdx
+++ b/docs/reference/hooks/use-session-list.mdx
@@ -101,6 +101,11 @@ The following example uses `useSessionList()` to get a list of sessions that hav
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useSessionList } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/')({
+    component: Home,
+  })
 
   export default function Home() {
     const { isLoaded, sessions } = useSessionList()
@@ -120,9 +125,9 @@ The following example uses `useSessionList()` to get a list of sessions that hav
 </If>
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/(session-list)/page.tsx' }}
   import { useSessionList } from '@clerk/clerk-expo'
-  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+  import { Text, View } from 'react-native'
 
   export default function Home() {
     const { isLoaded, sessions } = useSessionList()
diff --git a/docs/reference/hooks/use-session.mdx b/docs/reference/hooks/use-session.mdx
index dc128f4a0a..a9682ade9a 100644
--- a/docs/reference/hooks/use-session.mdx
+++ b/docs/reference/hooks/use-session.mdx
@@ -145,11 +145,11 @@ The following example uses the `useSession()` hook to access the `Session` objec
 </If>
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/(session)/page.tsx' }}
   import { useSession } from '@clerk/clerk-expo'
-  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+  import { Text, View } from 'react-native'
 
-  export function HomePage() {
+  export default function HomePage() {
     const { isLoaded, session, isSignedIn } = useSession()
 
     if (!isLoaded) {
diff --git a/docs/reference/hooks/use-sign-in.mdx b/docs/reference/hooks/use-sign-in.mdx
index 1108833536..cd4b7ab784 100644
--- a/docs/reference/hooks/use-sign-in.mdx
+++ b/docs/reference/hooks/use-sign-in.mdx
@@ -85,6 +85,11 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useSignIn } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/')({
+    component: SignInPage,
+  })
 
   export default function SignInPage() {
     const { isLoaded, signIn } = useSignIn()
@@ -100,9 +105,9 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
 </If>
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/(auth)/sign-in.tsx' }}
   import { useSignIn } from '@clerk/clerk-expo'
-  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+  import { Text, View } from 'react-native'
 
   export default function SignInPage() {
     const { isLoaded, signIn } = useSignIn()
@@ -112,7 +117,11 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
       return null
     }
 
-    return <View>The current sign-in attempt status is {signIn?.status}.</View>
+    return (
+      <View>
+        <Text>The current sign-in attempt status is {signIn?.status}.</Text>
+      </View>
+    )
   }
   ```
 </If>
diff --git a/docs/reference/hooks/use-sign-up.mdx b/docs/reference/hooks/use-sign-up.mdx
index 911147d4dc..baf0c8027b 100644
--- a/docs/reference/hooks/use-sign-up.mdx
+++ b/docs/reference/hooks/use-sign-up.mdx
@@ -85,6 +85,11 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useSignUp } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/')({
+    component: SignUpPage,
+  })
 
   export default function SignUpPage() {
     const { isLoaded, signUp } = useSignUp()
@@ -100,9 +105,9 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
 </If>
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/(auth)/sign-up.tsx' }}
   import { useSignUp } from '@clerk/clerk-expo'
-  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+  import { Text, View } from 'react-native'
 
   export default function SignUpPage() {
     const { isLoaded, signUp } = useSignUp()
@@ -112,7 +117,11 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
       return null
     }
 
-    return <View>The current sign-up attempt status is {signUp?.status}.</View>
+    return (
+      <View>
+        <Text>The current sign-up attempt status is {signUp?.status}.</Text>
+      </View>
+    )
   }
   ```
 </If>
diff --git a/docs/reference/hooks/use-subscription.mdx b/docs/reference/hooks/use-subscription.mdx
index b7c5d53f9e..b95729fa49 100644
--- a/docs/reference/hooks/use-subscription.mdx
+++ b/docs/reference/hooks/use-subscription.mdx
@@ -225,7 +225,7 @@ The following example shows how to handle subscription data with proper error st
 </If>
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/pricing/subscription-details/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'src/pages/pricing/subscription-details/page.tsx', collapsible: true }}
   import { useSubscription } from '@clerk/clerk-react/experimental'
 
   function SubscriptionDetails() {
diff --git a/docs/reference/hooks/use-user.mdx b/docs/reference/hooks/use-user.mdx
index c46f668941..77856241cd 100644
--- a/docs/reference/hooks/use-user.mdx
+++ b/docs/reference/hooks/use-user.mdx
@@ -98,6 +98,11 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useUser } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/')({
+    component: Example,
+  })
 
   export default function Example() {
     const { isSignedIn, user, isLoaded } = useUser()
@@ -116,9 +121,9 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/(user)/page.tsx' }}
   import { useUser } from '@clerk/clerk-expo'
-  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+  import { Text, View } from 'react-native'
 
   export default function Example() {
     const { isSignedIn, user, isLoaded } = useUser()
@@ -131,7 +136,11 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
       return <View>Sign in to view this page</View>
     }
 
-    return <View>Hello {user.firstName}!</View>
+    return (
+      <View>
+        <Text>Hello {user.firstName}!</Text>
+      </View>
+    )
   }
   ```
 </If>
@@ -273,6 +282,11 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useUser } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/')({
+    component: Home,
+  })
 
   export default function Home() {
     const { isSignedIn, isLoaded, user } = useUser()
@@ -303,9 +317,9 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/(user)/page.tsx' }}
   import { useUser } from '@clerk/clerk-expo'
-  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+  import { Text, View, TouchableOpacity } from 'react-native'
 
   export default function Home() {
     const { isSignedIn, isLoaded, user } = useUser()
@@ -325,11 +339,13 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
     }
 
     return (
-      <>
-        <button onClick={updateUser}>Update your name</button>
-        <p>user.firstName: {user.firstName}</p>
-        <p>user.lastName: {user.lastName}</p>
-      </>
+      <View>
+        <TouchableOpacity onPress={updateUser}>
+          <Text>Update your name</Text>
+        </TouchableOpacity>
+        <Text>user.firstName: {user.firstName}</Text>
+        <Text>user.lastName: {user.lastName}</Text>
+      </View>
     )
   }
   ```
@@ -357,6 +373,7 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
       // Update data via an API endpoint
       const updateMetadata = await fetch('/api/updateMetadata', {
         method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           role: 'admin',
         }),
@@ -401,6 +418,7 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
       // Update data via an API endpoint
       const updateMetadata = await fetch('/api/updateMetadata', {
         method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           role: 'admin',
         }),
@@ -443,6 +461,7 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
       // Update data via an API endpoint
       const updateMetadata = await fetch('/api/updateMetadata', {
         method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           role: 'admin',
         }),
@@ -485,6 +504,7 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
       // Update data via an API endpoint
       const updateMetadata = await fetch('/api/updateMetadata', {
         method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           role: 'admin',
         }),
@@ -512,6 +532,11 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/page.tsx' }}
   import { useUser } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/')({
+    component: Home,
+  })
 
   export default function Home() {
     const { isSignedIn, isLoaded, user } = useUser()
@@ -527,6 +552,7 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
       // Update data via an API endpoint
       const updateMetadata = await fetch('/api/updateMetadata', {
         method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           role: 'admin',
         }),
@@ -552,9 +578,9 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/(user)/page.tsx' }}
   import { useUser } from '@clerk/clerk-expo'
-  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+  import { Text, View, TouchableOpacity } from 'react-native'
 
   export default function Home() {
     const { isSignedIn, isLoaded, user } = useUser()
@@ -570,6 +596,7 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
       // Update data via an API endpoint
       const updateMetadata = await fetch('/api/updateMetadata', {
         method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           role: 'admin',
         }),
@@ -585,10 +612,12 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
     }
 
     return (
-      <>
-        <button onClick={updateUser}>Update your metadata</button>
-        <p>user role: {user.publicMetadata.role}</p>
-      </>
+      <View>
+        <TouchableOpacity onPress={updateUser}>
+          <Text>Update your metadata</Text>
+        </TouchableOpacity>
+        <Text>user role: {user.publicMetadata.role}</Text>
+      </View>
     )
   }
   ```

From 412b2934d017d8d82f5719ad5041e1f16b941de4 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Mon, 13 Oct 2025 16:54:42 -0600
Subject: [PATCH 19/32] Replace correct params for finalize method

---
 docs/reference/hooks/use-checkout.mdx        | 12 ++++++++++--
 docs/reference/hooks/use-payment-methods.mdx | 12 ++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/docs/reference/hooks/use-checkout.mdx b/docs/reference/hooks/use-checkout.mdx
index cc03ec2a83..9ad9b0fcdd 100644
--- a/docs/reference/hooks/use-checkout.mdx
+++ b/docs/reference/hooks/use-checkout.mdx
@@ -150,7 +150,11 @@ The `useCheckout()` hook can be used with a context provider for managing state
                 })
                 // Calling `.finalize` enables you to sync the client-side state with the server-side state of your users.
                 // It revalidates all authorization checks computed within server components.
-                finalize({ redirectUrl: '/dashboard' })
+                finalize({
+                  navigate: async ({ session }) => {
+                    window.location.href = `/dashboard?sessionId=${session.id}`
+                  },
+                })
               } catch (error) {
                 console.error('Payment failed:', error)
               } finally {
@@ -241,7 +245,11 @@ The `useCheckout()` hook can be used with a context provider for managing state
                 })
                 // Calling `.finalize` enables you to sync the client-side state with the server-side state of your users.
                 // It revalidates all authorization checks computed within server components.
-                finalize({ redirectUrl: '/dashboard' })
+                finalize({
+                  navigate: async ({ session }) => {
+                    window.location.href = `/dashboard?sessionId=${session.id}`
+                  },
+                })
               } catch (error) {
                 console.error('Payment failed:', error)
               } finally {
diff --git a/docs/reference/hooks/use-payment-methods.mdx b/docs/reference/hooks/use-payment-methods.mdx
index 9ee6cb0605..8eff8253e3 100644
--- a/docs/reference/hooks/use-payment-methods.mdx
+++ b/docs/reference/hooks/use-payment-methods.mdx
@@ -180,7 +180,11 @@ The following example demonstrates how to use `usePaymentMethods()` in a checkou
         // Confirm checkout with selected payment method
         await confirm({ paymentSourceId: paymentMethodId })
         // Complete checkout and redirect
-        finalize({ redirectUrl: '/dashboard' })
+        finalize({
+          navigate: async ({ session }) => {
+            window.location.href = `/dashboard?sessionId=${session.id}`
+          },
+        })
       } catch (error) {
         console.error('Payment failed:', error)
       }
@@ -223,7 +227,11 @@ The following example demonstrates how to use `usePaymentMethods()` in a checkou
         // Confirm checkout with selected payment method
         await confirm({ paymentSourceId: paymentMethodId })
         // Complete checkout and redirect
-        finalize({ redirectUrl: '/dashboard' })
+        finalize({
+          navigate: async ({ session }) => {
+            window.location.href = `/dashboard?sessionId=${session.id}`
+          },
+        })
       } catch (error) {
         console.error('Payment failed:', error)
       }

From 333e2f8e7af217cb43e0886d01b1b6e5875bafb8 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Tue, 14 Oct 2025 14:09:04 -0600
Subject: [PATCH 20/32] Add astro example

---
 docs/reference/hooks/use-auth.mdx | 45 +++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index 6590abd5a5..534bcff369 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -139,6 +139,51 @@ The following example demonstrates how to use the `useAuth()` hook to access the
   ```
 </If>
 
+<If sdk="astro">
+  ```tsx {{ filename: 'src/components/external-data-page.jsx' }}
+  import { useAuth } from '@clerk/astro/react'
+  import { useState } from 'react'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+    const [data, setData] = useState(null)
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      const json = await response.json()
+      setData(json)
+    }
+
+    if (!isLoaded) return <div>Loading...</div>
+    if (!isSignedIn) return <div>Sign in to view this page</div>
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+
+        {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+      </div>
+    )
+  }
+  ```
+
+  ```astro {{ filename: 'src/pages/auth.astro' }}
+  ---
+  import ExternalDataPage from '../components/external-data-page'
+  ---
+
+  <ExternalDataPage client:load />
+  ```
+</If>
+
 <If sdk="chrome-extension">
   ```tsx {{ filename: 'src/routes/page.tsx' }}
   import { useAuth } from '@clerk/chrome-extension'

From 44948983971a1982bc6b7d691c9b2fd8d19a940d Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Tue, 14 Oct 2025 14:46:51 -0600
Subject: [PATCH 21/32] Fixing build with latest changes

---
 docs/manifest.json                                       | 4 ++--
 .../javascript/types/billing-payment-method-resource.mdx | 9 +++++++++
 .../javascript/types/billing-payment-source-resource.mdx | 9 ---------
 3 files changed, 11 insertions(+), 11 deletions(-)
 create mode 100644 docs/reference/javascript/types/billing-payment-method-resource.mdx
 delete mode 100644 docs/reference/javascript/types/billing-payment-source-resource.mdx

diff --git a/docs/manifest.json b/docs/manifest.json
index 702f440b79..5441ea5ad1 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1664,8 +1664,8 @@
                                 "href": "/docs/reference/javascript/types/billing-payment-resource"
                               },
                               {
-                                "title": "`BillingPaymentSourceResource`",
-                                "href": "/docs/reference/javascript/types/billing-payment-source-resource"
+                                "title": "`BillingPaymentMethodResource`",
+                                "href": "/docs/reference/javascript/types/billing-payment-method-resource"
                               },
                               {
                                 "title": "`BillingPlanResource`",
diff --git a/docs/reference/javascript/types/billing-payment-method-resource.mdx b/docs/reference/javascript/types/billing-payment-method-resource.mdx
new file mode 100644
index 0000000000..06d40f0735
--- /dev/null
+++ b/docs/reference/javascript/types/billing-payment-method-resource.mdx
@@ -0,0 +1,9 @@
+---
+title: '`BillingPaymentMethodResource`'
+description: The BillingPaymentMethodResource type represents a payment source for a checkout session.
+sdk: js-frontend
+---
+
+<Include src="_partials/billing/billing-experimental" />
+
+<Typedoc src="types/billing-payment-method-resource" />
diff --git a/docs/reference/javascript/types/billing-payment-source-resource.mdx b/docs/reference/javascript/types/billing-payment-source-resource.mdx
deleted file mode 100644
index 04f1e89793..0000000000
--- a/docs/reference/javascript/types/billing-payment-source-resource.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: '`BillingPaymentSourceResource`'
-description: The BillingPaymentSourceResource type represents a payment source for a checkout session.
-sdk: js-frontend
----
-
-<Include src="_partials/billing/billing-experimental" />
-
-<Typedoc src="types/billing-payment-source-resource" />

From 1ed0325476ee10a375e81aa304e0f013e12934ad Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Wed, 15 Oct 2025 11:50:07 -0600
Subject: [PATCH 22/32] Finalize updates

---
 docs/_partials/billing/add-new-payment-method.mdx           | 4 ++--
 .../custom-flows/billing/add-new-payment-method.mdx         | 6 +-----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/docs/_partials/billing/add-new-payment-method.mdx b/docs/_partials/billing/add-new-payment-method.mdx
index df9ad1ec94..9a7dfee623 100644
--- a/docs/_partials/billing/add-new-payment-method.mdx
+++ b/docs/_partials/billing/add-new-payment-method.mdx
@@ -25,7 +25,7 @@ The following example demonstrates how to create a billing page where a user can
     }
     ```
 
-    ```tsx {{ filename: 'app/user/billing/AddPaymentMethodForm.tsx' }}
+    ```tsx {{ filename: 'app/user/billing/AddPaymentMethodForm.tsx', collapsible: true }}
     'use client'
     import { useUser } from '@clerk/nextjs'
     import { usePaymentElement, PaymentElement } from '@clerk/nextjs/experimental'
@@ -105,7 +105,7 @@ The following example demonstrates how to create a billing page where a user can
     }
     ```
 
-    ```tsx {{ filename: 'src/pages/user/billing/AddPaymentMethodForm.tsx' }}
+    ```tsx {{ filename: 'src/pages/user/billing/AddPaymentMethodForm.tsx', collapsible: true}}
     import { useUser } from '@clerk/clerk-react'
     import { usePaymentElement, PaymentElement } from '@clerk/clerk-react/experimental'
     import { useState } from 'react'
diff --git a/docs/guides/development/custom-flows/billing/add-new-payment-method.mdx b/docs/guides/development/custom-flows/billing/add-new-payment-method.mdx
index a6d4a32e25..e1a105cca4 100644
--- a/docs/guides/development/custom-flows/billing/add-new-payment-method.mdx
+++ b/docs/guides/development/custom-flows/billing/add-new-payment-method.mdx
@@ -25,9 +25,5 @@ For the custom flow that allows users to add a new payment method **during check
   1. Use the [`usePaymentElement()`](/docs/reference/hooks/use-payment-element) hook to submit the form and create a payment token.
   1. Use the [`useUser()`](/docs/reference/hooks/use-user) hook to attach the newly created payment method to the user.
 
-  <Tabs items={["Next.js"]}>
-    <Tab>
-      <Include src="_partials/billing/add-new-payment-method" />
-    </Tab>
-  </Tabs>
+  <Include src="_partials/billing/add-new-payment-method" />
 </Steps>

From dd962c77d2b87ed522baa5c57722bfc614193f0d Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Wed, 15 Oct 2025 11:50:36 -0600
Subject: [PATCH 23/32] Fix linting

---
 docs/_partials/billing/add-new-payment-method.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_partials/billing/add-new-payment-method.mdx b/docs/_partials/billing/add-new-payment-method.mdx
index 9a7dfee623..a6682bc71d 100644
--- a/docs/_partials/billing/add-new-payment-method.mdx
+++ b/docs/_partials/billing/add-new-payment-method.mdx
@@ -105,7 +105,7 @@ The following example demonstrates how to create a billing page where a user can
     }
     ```
 
-    ```tsx {{ filename: 'src/pages/user/billing/AddPaymentMethodForm.tsx', collapsible: true}}
+    ```tsx {{ filename: 'src/pages/user/billing/AddPaymentMethodForm.tsx', collapsible: true }}
     import { useUser } from '@clerk/clerk-react'
     import { usePaymentElement, PaymentElement } from '@clerk/clerk-react/experimental'
     import { useState } from 'react'

From 9576c44aab06da7c046c37939d919fca41ad6674 Mon Sep 17 00:00:00 2001
From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com>
Date: Thu, 16 Oct 2025 17:15:52 -0400
Subject: [PATCH 24/32] broad docs review

---
 .../billing/use-checkout-options.mdx          |  20 --
 docs/reference/hooks/use-auth.mdx             |  96 ++++----
 docs/reference/hooks/use-checkout.mdx         |  28 +--
 docs/reference/hooks/use-clerk.mdx            |  20 +-
 .../reference/hooks/use-organization-list.mdx | 205 +++++-----------
 docs/reference/hooks/use-organization.mdx     | 226 +++++-------------
 docs/reference/hooks/use-payment-attempts.mdx |  24 +-
 docs/reference/hooks/use-payment-methods.mdx  |  24 +-
 docs/reference/hooks/use-plans.mdx            |  24 +-
 docs/reference/hooks/use-reverification.mdx   |  72 +-----
 docs/reference/hooks/use-session-list.mdx     |  46 ++--
 docs/reference/hooks/use-session.mdx          |  90 +++----
 docs/reference/hooks/use-sign-in.mdx          |  40 ++--
 docs/reference/hooks/use-sign-up.mdx          |  46 ++--
 docs/reference/hooks/use-statements.mdx       |  24 +-
 docs/reference/hooks/use-subscription.mdx     |  24 +-
 docs/reference/hooks/use-user.mdx             | 215 ++++++++---------
 17 files changed, 428 insertions(+), 796 deletions(-)
 delete mode 100644 docs/_partials/billing/use-checkout-options.mdx

diff --git a/docs/_partials/billing/use-checkout-options.mdx b/docs/_partials/billing/use-checkout-options.mdx
deleted file mode 100644
index 3c1075f36b..0000000000
--- a/docs/_partials/billing/use-checkout-options.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-<Properties>
-  - `for?`
-  - `'user' | 'organization'`
-
-  Specifies if the checkout is for an organization. If omitted, the checkout defaults to the current user.
-
-  ---
-
-  - `planId`
-  - `string`
-
-  The ID of the subscription plan to check out (e.g. `cplan_xxx`).
-
-  ---
-
-  - `planPeriod`
-  - `'month' | 'annual'`
-
-  The billing period for the plan.
-</Properties>
diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index 534bcff369..78b92253ed 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -13,6 +13,10 @@ The `useAuth()` hook provides access to the current user's authentication state
   By default, Next.js opts all routes into static rendering. If you need to opt a route or routes into dynamic rendering because you need to access the authentication data at request time, you can create a boundary by passing the `dynamic` prop to `<ClerkProvider>`. See the [guide on rendering modes](/docs/guides/development/rendering-modes) for more information, including code examples.
 </If>
 
+<Typedoc src="clerk-react/use-auth-params" />
+
+<Typedoc src="clerk-react/use-auth-return" />
+
 ## Example
 
 The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource.
@@ -37,13 +41,11 @@ The following example demonstrates how to use the `useAuth()` hook to access the
       return response.json()
     }
 
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return (
       <div>
@@ -63,7 +65,7 @@ The following example demonstrates how to use the `useAuth()` hook to access the
 
   import { useAuth } from '@clerk/nextjs'
 
-  export default function ExternalDataPage() {
+  export default function Page() {
     const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
 
     const fetchExternalData = async () => {
@@ -79,13 +81,11 @@ The following example demonstrates how to use the `useAuth()` hook to access the
       return response.json()
     }
 
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return (
       <div>
@@ -100,10 +100,10 @@ The following example demonstrates how to use the `useAuth()` hook to access the
 </If>
 
 <If sdk="react-router">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/home.tsx' }}
   import { useAuth } from '@clerk/react-router'
 
-  export default function ExternalDataPage() {
+  export default function Home() {
     const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
 
     const fetchExternalData = async () => {
@@ -119,13 +119,11 @@ The following example demonstrates how to use the `useAuth()` hook to access the
       return response.json()
     }
 
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return (
       <div>
@@ -140,11 +138,11 @@ The following example demonstrates how to use the `useAuth()` hook to access the
 </If>
 
 <If sdk="astro">
-  ```tsx {{ filename: 'src/components/external-data-page.jsx' }}
+  ```tsx {{ filename: 'src/components/external-data.jsx' }}
   import { useAuth } from '@clerk/astro/react'
   import { useState } from 'react'
 
-  export default function ExternalDataPage() {
+  export default function ExternalData() {
     const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
     const [data, setData] = useState(null)
 
@@ -159,7 +157,10 @@ The following example demonstrates how to use the `useAuth()` hook to access the
       setData(json)
     }
 
+    // Handle loading state
     if (!isLoaded) return <div>Loading...</div>
+
+    // Protect the page from unauthenticated users
     if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return (
@@ -177,10 +178,10 @@ The following example demonstrates how to use the `useAuth()` hook to access the
 
   ```astro {{ filename: 'src/pages/auth.astro' }}
   ---
-  import ExternalDataPage from '../components/external-data-page'
+  import ExternalData from '../components/external-data'
   ---
 
-  <ExternalDataPage client:load />
+  <ExternalData client:load />
   ```
 </If>
 
@@ -204,13 +205,11 @@ The following example demonstrates how to use the `useAuth()` hook to access the
       return response.json()
     }
 
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return (
       <div>
@@ -225,7 +224,7 @@ The following example demonstrates how to use the `useAuth()` hook to access the
 </If>
 
 <If sdk="tanstack-react-start">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/index.tsx' }}
   import { useAuth } from '@clerk/tanstack-react-start'
   import { createFileRoute } from '@tanstack/react-router'
 
@@ -249,13 +248,11 @@ The following example demonstrates how to use the `useAuth()` hook to access the
       return response.json()
     }
 
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return (
       <div>
@@ -269,17 +266,12 @@ The following example demonstrates how to use the `useAuth()` hook to access the
   ```
 </If>
 
-{/* <If sdk="astro">
-
-
-  </If> */}
-
 <If sdk="expo">
-  ```tsx {{ filename: 'app/(auth)/external-data.tsx' }}
+  ```tsx {{ filename: 'app/external-data.tsx' }}
   import { useAuth } from '@clerk/clerk-expo'
   import { Text, View, TouchableOpacity } from 'react-native'
 
-  export default function ExternalDataPage() {
+  export default function ExternalData() {
     const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
 
     const fetchExternalData = async () => {
@@ -295,13 +287,11 @@ The following example demonstrates how to use the `useAuth()` hook to access the
       return response.json()
     }
 
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
 
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <View>Sign in to view this page</View>
 
     return (
       <View>
@@ -316,7 +306,3 @@ The following example demonstrates how to use the `useAuth()` hook to access the
   }
   ```
 </If>
-
-<Typedoc src="clerk-react/use-auth-params" />
-
-<Typedoc src="clerk-react/use-auth-return" />
diff --git a/docs/reference/hooks/use-checkout.mdx b/docs/reference/hooks/use-checkout.mdx
index 9ad9b0fcdd..e8d90067ef 100644
--- a/docs/reference/hooks/use-checkout.mdx
+++ b/docs/reference/hooks/use-checkout.mdx
@@ -13,14 +13,22 @@ There are two ways to use `useCheckout()`:
 1. In conjunction with [`<CheckoutProvider />`](#checkout-provider) to create a shared checkout context. All child components inside the provider can then use `useCheckout()` to access or update the same checkout state.
 1. On its own by passing configuration options directly to it. This is ideal for self-contained components that handle their own checkout flow without needing a shared context.
 
-## `<CheckoutProvider />`
-
-The `<CheckoutProvider />` component is a wrapper that provides a checkout context to its children, allowing checkout state to be shared across multiple components. Child components can access the checkout context by calling `useCheckout()`.
+<Typedoc src="clerk-react/experimental_use-checkout-params" />
 
-## Properties
+### `UseCheckoutOptions`
 
 <Typedoc src="shared/use-checkout-options" />
 
+## Returns
+
+`useCheckout()` returns a `{ checkout }` object. The `checkout` object contains the following properties. They are `null` until the checkout process is started by calling the `start()` method.
+
+<Typedoc src="shared/use-checkout-return" />
+
+## `<CheckoutProvider />`
+
+The `<CheckoutProvider />` component is a wrapper that provides a checkout context to its children, allowing checkout state to be shared across multiple components. Child components can access the checkout context by calling `useCheckout()`.
+
 ## Usage
 
 For the best user experience and to prevent potential errors, always wrap components using `useCheckout()` with both `<ClerkLoaded>` and `<SignedIn>` components. This ensures that the user is properly authenticated and Clerk is fully initialized before accessing checkout functionality.
@@ -387,18 +395,6 @@ The `useCheckout()` hook can be used with a context provider for managing state
   </Tab>
 </Tabs>
 
-<Typedoc src="clerk-react/experimental_use-checkout-params" />
-
-## `UseCheckoutOptions`
-
-<Typedoc src="shared/use-checkout-options" />
-
-## Returns
-
-`useCheckout()` returns a `{ checkout }` object. The `checkout` object contains the following properties. They are `null` until the checkout process is started by calling the `start()` method.
-
-<Typedoc src="shared/use-checkout-return" />
-
 ## Related guides
 
 <Cards>
diff --git a/docs/reference/hooks/use-clerk.mdx b/docs/reference/hooks/use-clerk.mdx
index df615bf401..6217300d2f 100644
--- a/docs/reference/hooks/use-clerk.mdx
+++ b/docs/reference/hooks/use-clerk.mdx
@@ -9,15 +9,17 @@ sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 
 The `useClerk()` hook provides access to the [`Clerk`](/docs/reference/javascript/clerk) object, allowing you to build alternatives to any Clerk Component.
 
+<Typedoc src="clerk-react/use-clerk-return" />
+
 ## Example
 
 The following example uses the `useClerk()` hook to access the `clerk` object. The `clerk` object is used to call the [`openSignIn()`](/docs/reference/javascript/clerk#sign-in) method to open the sign-in modal.
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/pages/Home.tsx' }}
+  ```tsx {{ filename: 'src/pages/Example.tsx' }}
   import { useClerk } from '@clerk/clerk-react'
 
-  export default function Home() {
+  export default function Example() {
     const clerk = useClerk()
 
     return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
@@ -26,12 +28,12 @@ The following example uses the `useClerk()` hook to access the `clerk` object. T
 </If>
 
 <If sdk="nextjs">
-  ```tsx {{ filename: 'app/home/page.tsx' }}
+  ```tsx {{ filename: 'app/page.tsx' }}
   'use client'
 
   import { useClerk } from '@clerk/nextjs'
 
-  export default function HomePage() {
+  export default function Page() {
     const clerk = useClerk()
 
     return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
@@ -40,7 +42,7 @@ The following example uses the `useClerk()` hook to access the `clerk` object. T
 </If>
 
 <If sdk="react-router">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/home.tsx' }}
   import { useClerk } from '@clerk/react-router'
 
   export default function Home() {
@@ -64,7 +66,7 @@ The following example uses the `useClerk()` hook to access the `clerk` object. T
 </If>
 
 <If sdk="tanstack-react-start">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/index.tsx' }}
   import { useClerk } from '@clerk/tanstack-react-start'
   import { createFileRoute } from '@tanstack/react-router'
 
@@ -81,11 +83,11 @@ The following example uses the `useClerk()` hook to access the `clerk` object. T
 </If>
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/(clerk)/page.tsx' }}
+  ```tsx {{ filename: 'app/(clerk)/index.tsx' }}
   import { useClerk } from '@clerk/clerk-expo'
   import { Text, View, TouchableOpacity } from 'react-native'
 
-  export default function Home() {
+  export default function Page() {
     const clerk = useClerk()
 
     return (
@@ -98,5 +100,3 @@ The following example uses the `useClerk()` hook to access the `clerk` object. T
   }
   ```
 </If>
-
-<Typedoc src="clerk-react/use-clerk-return" />
diff --git a/docs/reference/hooks/use-organization-list.mdx b/docs/reference/hooks/use-organization-list.mdx
index d8c7589c6d..5ee7e4d442 100644
--- a/docs/reference/hooks/use-organization-list.mdx
+++ b/docs/reference/hooks/use-organization-list.mdx
@@ -6,6 +6,37 @@ sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-
 
 The `useOrganizationList()` hook provides access to the current user's organization memberships, invitations, and suggestions. It also includes methods for creating new organizations and managing the [active organization](!active-organization).
 
+## Parameters
+
+`useOrganizationList()` accepts a single object with the following properties:
+
+<Typedoc src="shared/use-organization-list-params" />
+
+> [!WARNING]
+> By default, the `userMemberships`, `userInvitations`, and `userSuggestions` attributes are not populated. To fetch and paginate the data, you must pass `true` or an object with the desired properties.
+
+### Shared properties
+
+Optional properties that are shared across the `userMemberships`, `userInvitations`, and `userSuggestions` properties.
+
+<Typedoc src="shared/pages-or-infinite-options" />
+
+<Typedoc src="shared/paginated-hook-config" />
+
+## Returns
+
+<Typedoc src="shared/use-organization-list-return" />
+
+### `CreateOrganizationParams`
+
+<Typedoc src="types/create-organization-params" />
+
+### `PaginatedResources`
+
+<Typedoc src="shared/paginated-resources" />
+
+To see the different organization features integrated into one application, take a look at our [organizations demo repository](https://github.com/clerk/organizations-demo).
+
 ## Examples
 
 ### Expanding and paginating attributes
@@ -53,9 +84,8 @@ The following example demonstrates how to use the `infinite` property to fetch a
       },
     })
 
-    if (!isLoaded) {
-      return <>Loading</>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return (
       <>
@@ -92,9 +122,8 @@ The following example demonstrates how to use the `infinite` property to fetch a
       },
     })
 
-    if (!isLoaded) {
-      return <>Loading</>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return (
       <>
@@ -127,9 +156,8 @@ The following example demonstrates how to use the `infinite` property to fetch a
       },
     })
 
-    if (!isLoaded) {
-      return <>Loading</>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return (
       <>
@@ -162,44 +190,8 @@ The following example demonstrates how to use the `infinite` property to fetch a
       },
     })
 
-    if (!isLoaded) {
-      return <>Loading</>
-    }
-
-    return (
-      <>
-        <ul>
-          {userMemberships.data?.map((mem) => (
-            <li key={mem.id}>
-              <span>{mem.organization.name}</span>
-              <button onClick={() => setActive({ organization: mem.organization.id })}>Select</button>
-            </li>
-          ))}
-        </ul>
-
-        <button disabled={!userMemberships.hasNextPage} onClick={() => userMemberships.fetchNext()}>
-          Load more
-        </button>
-      </>
-    )
-  }
-  ```
-</If>
-
-<If sdk="remix">
-  ```tsx {{ filename: 'components/JoinedOrganizations.tsx' }}
-  import { useOrganizationList } from '@clerk/remix'
-
-  export function JoinedOrganizations() {
-    const { isLoaded, setActive, userMemberships } = useOrganizationList({
-      userMemberships: {
-        infinite: true,
-      },
-    })
-
-    if (!isLoaded) {
-      return <>Loading</>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return (
       <>
@@ -232,9 +224,8 @@ The following example demonstrates how to use the `infinite` property to fetch a
       },
     })
 
-    if (!isLoaded) {
-      return <>Loading</>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return (
       <>
@@ -268,9 +259,8 @@ The following example demonstrates how to use the `infinite` property to fetch a
       },
     })
 
-    if (!isLoaded) {
-      return <Text>Loading</Text>
-    }
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
 
     return (
       <View>
@@ -316,9 +306,8 @@ Notice the difference between this example's pagination and the infinite paginat
       },
     })
 
-    if (!isLoaded || userInvitations.isLoading) {
-      return <>Loading</>
-    }
+    // Handle loading state
+    if (!isLoaded || userInvitations.isLoading) return <div>Loading...</div>
 
     return (
       <>
@@ -368,9 +357,8 @@ Notice the difference between this example's pagination and the infinite paginat
       },
     })
 
-    if (!isLoaded || userInvitations.isLoading) {
-      return <>Loading</>
-    }
+    // Handle loading state
+    if (!isLoaded || userInvitations.isLoading) return <div>Loading...</div>
 
     return (
       <>
@@ -416,9 +404,8 @@ Notice the difference between this example's pagination and the infinite paginat
       },
     })
 
-    if (!isLoaded || userInvitations.isLoading) {
-      return <>Loading</>
-    }
+    // Handle loading state
+    if (!isLoaded || userInvitations.isLoading) return <div>Loading...</div>
 
     return (
       <>
@@ -464,57 +451,8 @@ Notice the difference between this example's pagination and the infinite paginat
       },
     })
 
-    if (!isLoaded || userInvitations.isLoading) {
-      return <>Loading</>
-    }
-
-    return (
-      <>
-        <table>
-          <thead>
-            <tr>
-              <th>Email</th>
-              <th>Org name</th>
-            </tr>
-          </thead>
-
-          <tbody>
-            {userInvitations.data?.map((inv) => (
-              <tr key={inv.id}>
-                <th>{inv.emailAddress}</th>
-                <th>{inv.publicOrganizationData.name}</th>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-
-        <button disabled={!userInvitations.hasPreviousPage} onClick={userInvitations.fetchPrevious}>
-          Prev
-        </button>
-        <button disabled={!userInvitations.hasNextPage} onClick={userInvitations.fetchNext}>
-          Next
-        </button>
-      </>
-    )
-  }
-  ```
-</If>
-
-<If sdk="remix">
-  ```tsx {{ filename: 'components/UserInvitationsTable.tsx' }}
-  import { useOrganizationList } from '@clerk/remix'
-
-  export function UserInvitationsTable() {
-    const { isLoaded, userInvitations } = useOrganizationList({
-      userInvitations: {
-        infinite: true,
-        keepPreviousData: true,
-      },
-    })
-
-    if (!isLoaded || userInvitations.isLoading) {
-      return <>Loading</>
-    }
+    // Handle loading state
+    if (!isLoaded || userInvitations.isLoading) return <div>Loading...</div>
 
     return (
       <>
@@ -560,9 +498,8 @@ Notice the difference between this example's pagination and the infinite paginat
       },
     })
 
-    if (!isLoaded || userInvitations.isLoading) {
-      return <>Loading</>
-    }
+    // Handle loading state
+    if (!isLoaded || userInvitations.isLoading) return <div>Loading...</div>
 
     return (
       <>
@@ -608,9 +545,8 @@ Notice the difference between this example's pagination and the infinite paginat
       },
     })
 
-    if (!isLoaded || userInvitations.isLoading) {
-      return <Text>Loading</Text>
-    }
+    // Handle loading state
+    if (!isLoaded || userInvitations.isLoading) return <View>Loading...</View>
 
     return (
       <View>
@@ -642,34 +578,3 @@ Notice the difference between this example's pagination and the infinite paginat
   }
   ```
 </If>
-
-## Properties
-
-`useOrganizationList()` accepts a single object with the following properties:
-
-<Typedoc src="shared/use-organization-list-params" />
-
-> [!WARNING]
-> By default, the `userMemberships`, `userInvitations`, and `userSuggestions` attributes are not populated. To fetch and paginate the data, you must pass `true` or an object with the desired properties.
-
-### Shared properties
-
-Optional properties that are shared across the `userMemberships`, `userInvitations`, and `userSuggestions` properties.
-
-<Typedoc src="shared/pages-or-infinite-options" />
-
-<Typedoc src="shared/paginated-hook-config" />
-
-## Returns
-
-<Typedoc src="shared/use-organization-list-return" />
-
-### `CreateOrganizationParams`
-
-<Typedoc src="types/create-organization-params" />
-
-### `PaginatedResources`
-
-<Typedoc src="shared/paginated-resources" />
-
-To see the different organization features integrated into one application, take a look at our [organizations demo repository](https://github.com/clerk/organizations-demo).
diff --git a/docs/reference/hooks/use-organization.mdx b/docs/reference/hooks/use-organization.mdx
index 3cd8e00a4c..1f18be6bc0 100644
--- a/docs/reference/hooks/use-organization.mdx
+++ b/docs/reference/hooks/use-organization.mdx
@@ -8,6 +8,36 @@ sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-
 
 The `useOrganization()` hook retrieves attributes of the currently [active organization](!active-organization).
 
+## Parameters
+
+`useOrganization()` accepts a single object with the following optional properties:
+
+<Typedoc src="shared/use-organization-params" />
+
+> [!WARNING]
+> By default, the `memberships`, `invitations`, `membershipRequests`, and `domains` attributes aren't populated. To fetch and paginate the data, you must pass `true` or an object with the desired properties.
+
+### Shared properties
+
+Optional properties that are shared across the `invitations`, `membershipRequests`, `memberships`, and `domains` properties.
+
+<Typedoc src="shared/pages-or-infinite-options" />
+
+<Typedoc src="shared/paginated-hook-config" />
+
+> [!NOTE]
+> These attributes are updating automatically and will re-render their respective components whenever you set a different organization using the [`setActive({ organization })`](/docs/reference/javascript/clerk#set-active) method or update any of the memberships or invitations. No need for you to manage updating anything manually.
+
+## Returns
+
+<Typedoc src="shared/use-organization-return" />
+
+### `PaginatedResources`
+
+<Typedoc src="shared/paginated-resources" />
+
+To see the different organization features integrated into one application, take a look at our [organizations demo repository](https://github.com/clerk/organizations-demo).
+
 ## Examples
 
 ### Expand and paginate attributes
@@ -55,10 +85,8 @@ The following example demonstrates how to use the `infinite` property to fetch a
       },
     })
 
-    if (!memberships) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!memberships) return <div>Loading...</div>
 
     return (
       <div>
@@ -85,12 +113,12 @@ The following example demonstrates how to use the `infinite` property to fetch a
 </If>
 
 <If sdk="nextjs">
-  ```tsx {{ filename: 'app/users/page.tsx' }}
+  ```tsx {{ filename: 'app/organization/members/page.tsx' }}
   'use client'
 
   import { useOrganization } from '@clerk/nextjs'
 
-  export default function MemberListPage() {
+  export default function Page() {
     const { memberships } = useOrganization({
       memberships: {
         infinite: true, // Append new data to the existing list
@@ -98,10 +126,8 @@ The following example demonstrates how to use the `infinite` property to fetch a
       },
     })
 
-    if (!memberships) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!memberships) return <div>Loading...</div>
 
     return (
       <div>
@@ -139,10 +165,8 @@ The following example demonstrates how to use the `infinite` property to fetch a
       },
     })
 
-    if (!memberships) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!memberships) return <div>Loading...</div>
 
     return (
       <div>
@@ -180,51 +204,8 @@ The following example demonstrates how to use the `infinite` property to fetch a
       },
     })
 
-    if (!memberships) {
-      // Handle loading state
-      return null
-    }
-
-    return (
-      <div>
-        <h2>Organization members</h2>
-        <ul>
-          {memberships.data?.map((membership) => (
-            <li key={membership.id}>
-              {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
-              {membership.publicUserData?.identifier}&gt; :: {membership.role}
-            </li>
-          ))}
-        </ul>
-
-        <button
-          disabled={!memberships.hasNextPage} // Disable the button if there are no more available pages to be fetched
-          onClick={memberships.fetchNext}
-        >
-          Load more
-        </button>
-      </div>
-    )
-  }
-  ```
-</If>
-
-<If sdk="remix">
-  ```tsx {{ filename: 'app/routes/members.tsx' }}
-  import { useOrganization } from '@clerk/remix'
-
-  export default function MemberListPage() {
-    const { memberships } = useOrganization({
-      memberships: {
-        infinite: true, // Append new data to the existing list
-        keepPreviousData: true, // Persist the cached data until the new data has been fetched
-      },
-    })
-
-    if (!memberships) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!memberships) return <div>Loading...</div>
 
     return (
       <div>
@@ -259,7 +240,7 @@ The following example demonstrates how to use the `infinite` property to fetch a
     component: MemberListPage,
   })
 
-  function MemberListPage() {
+  export default function MemberListPage() {
     const { memberships } = useOrganization({
       memberships: {
         infinite: true, // Append new data to the existing list
@@ -267,10 +248,8 @@ The following example demonstrates how to use the `infinite` property to fetch a
       },
     })
 
-    if (!memberships) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!memberships) return <div>Loading...</div>
 
     return (
       <div>
@@ -309,10 +288,8 @@ The following example demonstrates how to use the `infinite` property to fetch a
       },
     })
 
-    if (!memberships) {
-      // Handle loading state
-      return <Text>Loading...</Text>
-    }
+    // Handle loading state
+    if (!memberships) return <View>Loading...</View>
 
     return (
       <View>
@@ -357,10 +334,8 @@ Notice the difference between this example's pagination and the infinite paginat
       },
     })
 
-    if (!memberships) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!memberships) return <div>Loading...</div>
 
     return (
       <div>
@@ -388,22 +363,20 @@ Notice the difference between this example's pagination and the infinite paginat
 </If>
 
 <If sdk="nextjs">
-  ```tsx {{ filename: 'app/users/page.tsx' }}
+  ```tsx {{ filename: 'app/members/page.tsx' }}
   'use client'
 
   import { useOrganization } from '@clerk/nextjs'
 
-  export default function MemberListPage() {
+  export default function Page() {
     const { memberships } = useOrganization({
       memberships: {
         keepPreviousData: true, // Persist the cached data until the new data has been fetched
       },
     })
 
-    if (!memberships) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!memberships) return <div>Loading...</div>
 
     return (
       <div>
@@ -441,10 +414,8 @@ Notice the difference between this example's pagination and the infinite paginat
       },
     })
 
-    if (!memberships) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!memberships) return <div>Loading...</div>
 
     return (
       <div>
@@ -482,51 +453,8 @@ Notice the difference between this example's pagination and the infinite paginat
       },
     })
 
-    if (!memberships) {
-      // Handle loading state
-      return null
-    }
-
-    return (
-      <div>
-        <h2>Organization members</h2>
-        <ul>
-          {memberships.data?.map((membership) => (
-            <li key={membership.id}>
-              {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
-              {membership.publicUserData?.identifier}&gt; :: {membership.role}
-            </li>
-          ))}
-        </ul>
-
-        <button disabled={!memberships.hasPreviousPage} onClick={memberships.fetchPrevious}>
-          Previous page
-        </button>
-
-        <button disabled={!memberships.hasNextPage} onClick={memberships.fetchNext}>
-          Next page
-        </button>
-      </div>
-    )
-  }
-  ```
-</If>
-
-<If sdk="remix">
-  ```tsx {{ filename: 'app/routes/members-paginated.tsx' }}
-  import { useOrganization } from '@clerk/remix'
-
-  export default function MemberListPage() {
-    const { memberships } = useOrganization({
-      memberships: {
-        keepPreviousData: true, // Persist the cached data until the new data has been fetched
-      },
-    })
-
-    if (!memberships) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!memberships) return <div>Loading...</div>
 
     return (
       <div>
@@ -562,17 +490,15 @@ Notice the difference between this example's pagination and the infinite paginat
     component: MemberListPage,
   })
 
-  function MemberListPage() {
+  export default function MemberListPage() {
     const { memberships } = useOrganization({
       memberships: {
         keepPreviousData: true, // Persist the cached data until the new data has been fetched
       },
     })
 
-    if (!memberships) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!memberships) return <div>Loading...</div>
 
     return (
       <div>
@@ -611,10 +537,8 @@ Notice the difference between this example's pagination and the infinite paginat
       },
     })
 
-    if (!memberships) {
-      // Handle loading state
-      return <Text>Loading...</Text>
-    }
+    // Handle loading state
+    if (!memberships) return <View>Loading...</View>
 
     return (
       <View>
@@ -642,33 +566,3 @@ Notice the difference between this example's pagination and the infinite paginat
   }
   ```
 </If>
-
-## Properties
-
-`useOrganization()` accepts a single object with the following optional properties:
-
-<Typedoc src="shared/use-organization-params" />
-
-> [!WARNING]
-> By default, the `memberships`, `invitations`, `membershipRequests`, and `domains` attributes aren't populated. To fetch and paginate the data, you must pass `true` or an object with the desired properties.
-
-### Shared properties
-
-Optional properties that are shared across the `invitations`, `membershipRequests`, `memberships`, and `domains` properties.
-
-<Typedoc src="shared/pages-or-infinite-options" />
-
-<Typedoc src="shared/paginated-hook-config" />
-
-> [!NOTE]
-> These attributes are updating automatically and will re-render their respective components whenever you set a different organization using the [`setActive({ organization })`](/docs/reference/javascript/clerk#set-active) method or update any of the memberships or invitations. No need for you to manage updating anything manually.
-
-## Returns
-
-<Typedoc src="shared/use-organization-return" />
-
-### `PaginatedResources`
-
-<Typedoc src="shared/paginated-resources" />
-
-To see the different organization features integrated into one application, take a look at our [organizations demo repository](https://github.com/clerk/organizations-demo).
diff --git a/docs/reference/hooks/use-payment-attempts.mdx b/docs/reference/hooks/use-payment-attempts.mdx
index cbd4750256..f4d136a0c3 100644
--- a/docs/reference/hooks/use-payment-attempts.mdx
+++ b/docs/reference/hooks/use-payment-attempts.mdx
@@ -8,6 +8,18 @@ sdk: nextjs, react
 
 The `usePaymentAttempts()` hook provides access to the payment attempts associated with a user or organization. It returns a paginated list of payment attempts and includes methods for managing them.
 
+## Parameters
+
+`usePaymentAttempts()` accepts a single optional object with the following properties:
+
+<Typedoc src="shared/hook-params" />
+
+## Returns
+
+`usePaymentAttempts()` returns an object with the following properties:
+
+<Typedoc src="shared/use-payment-attempts-return" />
+
 ## Examples
 
 ### Basic usage
@@ -287,15 +299,3 @@ The following example demonstrates how to use `usePaymentAttempts()` to display
   }
   ```
 </If>
-
-## Properties
-
-`usePaymentAttempts()` accepts a single optional object with the following properties:
-
-<Typedoc src="shared/hook-params" />
-
-## Returns
-
-`usePaymentAttempts()` returns an object with the following properties:
-
-<Typedoc src="shared/use-payment-attempts-return" />
diff --git a/docs/reference/hooks/use-payment-methods.mdx b/docs/reference/hooks/use-payment-methods.mdx
index 8eff8253e3..395b6a3d12 100644
--- a/docs/reference/hooks/use-payment-methods.mdx
+++ b/docs/reference/hooks/use-payment-methods.mdx
@@ -8,6 +8,18 @@ sdk: nextjs, react
 
 The `usePaymentMethods()` hook provides access to the payment methods associated with a user or organization. It returns a paginated list of payment methods and includes methods for managing them.
 
+## Parameters
+
+`usePaymentMethods()` accepts a single optional object with the following properties:
+
+<Typedoc src="shared/hook-params" />
+
+## Returns
+
+`usePaymentMethods()` returns an object with the following properties:
+
+<Typedoc src="shared/use-payment-methods-return" />
+
 ## Examples
 
 ### Basic usage
@@ -260,18 +272,6 @@ The following example demonstrates how to use `usePaymentMethods()` in a checkou
   ```
 </If>
 
-## Properties
-
-`usePaymentMethods()` accepts a single optional object with the following properties:
-
-<Typedoc src="shared/hook-params" />
-
-## Returns
-
-`usePaymentMethods()` returns an object with the following properties:
-
-<Typedoc src="shared/use-payment-methods-return" />
-
 ## Related guides
 
 <Cards>
diff --git a/docs/reference/hooks/use-plans.mdx b/docs/reference/hooks/use-plans.mdx
index f411536b0f..111028e6c6 100644
--- a/docs/reference/hooks/use-plans.mdx
+++ b/docs/reference/hooks/use-plans.mdx
@@ -8,6 +8,18 @@ sdk: nextjs, react
 
 The `usePlans()` hook provides access to the subscription plans available in your application. It returns a paginated list of plans and includes methods for managing them.
 
+## Parameters
+
+`usePlans()` accepts a single optional object with the following properties:
+
+<Typedoc src="shared/hook-params" />
+
+## Returns
+
+`usePlans()` returns an object with the following properties:
+
+<Typedoc src="shared/use-plans-return" />
+
 ## Examples
 
 ### Basic usage
@@ -203,15 +215,3 @@ The following example demonstrates how to implement infinite scrolling with plan
   }
   ```
 </If>
-
-## Properties
-
-`usePlans()` accepts a single optional object with the following properties:
-
-<Typedoc src="shared/hook-params" />
-
-## Returns
-
-`usePlans()` returns an object with the following properties:
-
-<Typedoc src="shared/use-plans-return" />
diff --git a/docs/reference/hooks/use-reverification.mdx b/docs/reference/hooks/use-reverification.mdx
index ecd6feb056..42b6fee473 100644
--- a/docs/reference/hooks/use-reverification.mdx
+++ b/docs/reference/hooks/use-reverification.mdx
@@ -12,6 +12,16 @@ The `useReverification()` hook is used to handle a session's reverification flow
 
 When using reverification, a user's credentials are valid for 10 minutes. Once stale, a user will need to reverify their credentials. This time duration can be customized by using the `has()` helper on the server-side. See the [guide on reverification](/docs/guides/secure/reverification) for more information.
 
+<Typedoc src="clerk-react/use-reverification-params" />
+
+### `UseReverificationOptions`
+
+<Typedoc src="shared/use-reverification-options" />
+
+### `NeedsReverificationParameters`
+
+<Typedoc src="shared/needs-reverification-parameters" />
+
 ## Examples
 
 The `useReverification()` hook displays a prebuilt UI when the user needs to reverify their credentials. You can also build a custom UI to handle the reverification process yourself. Use the following tabs to see examples of either option.
@@ -237,58 +247,6 @@ The `useReverification()` hook displays a prebuilt UI when the user needs to rev
       ```
     </If>
 
-    <If sdk="remix">
-      ```tsx {{ filename: 'components/UpdateUserEmail.tsx', collapsible: true }}
-      import { useReverification, useUser } from '@clerk/remix'
-      import { isClerkRuntimeError, isReverificationCancelledError } from '@clerk/shared'
-
-      export function UpdateUserEmail() {
-        // Use `useUser()` to get the current user's `User` object
-        // `User` includes the `update()` method to update the user's primary email address
-        const { user } = useUser()
-
-        // Use `useReverification()` to enhance the `update()` method
-        // to handle the reverification process
-        const changePrimaryEmail = useReverification((emailAddressId: string) =>
-          user?.update({ primaryEmailAddressId: emailAddressId }),
-        )
-
-        const handleClick = async (emailAddressId: string) => {
-          try {
-            await changePrimaryEmail(emailAddressId)
-          } catch (e) {
-            // Handle if user cancels the reverification process
-            if (isClerkRuntimeError(e) && isReverificationCancelledError(e)) {
-              console.error('User cancelled reverification', e.code)
-            }
-
-            // Handle other errors
-            // See https://clerk.com/docs/custom-flows/error-handling
-            // for more info on error handling
-            console.error(JSON.stringify(e, null, 2))
-          }
-        }
-
-        return (
-          <div>
-            <span>Your primary email address is {user?.primaryEmailAddress?.emailAddress}</span>
-
-            <ul>
-              {user?.emailAddresses.map((email) => (
-                <li key={email.id}>
-                  <span>{email.emailAddress}</span>
-                  {email.id !== user?.primaryEmailAddress?.id && (
-                    <button onClick={() => handleClick(email.id)}>Make primary</button>
-                  )}
-                </li>
-              ))}
-            </ul>
-          </div>
-        )
-      }
-      ```
-    </If>
-
     <If sdk="tanstack-react-start">
       ```tsx {{ filename: 'components/UpdateUserEmail.tsx', collapsible: true }}
       import { useReverification, useUser } from '@clerk/tanstack-react-start'
@@ -1982,13 +1940,3 @@ The `useReverification()` hook displays a prebuilt UI when the user needs to rev
     </Tabs>
   </Tab>
 </Tabs>
-
-<Typedoc src="clerk-react/use-reverification-params" />
-
-### `UseReverificationOptions`
-
-<Typedoc src="shared/use-reverification-options" />
-
-### `NeedsReverificationParameters`
-
-<Typedoc src="shared/needs-reverification-parameters" />
diff --git a/docs/reference/hooks/use-session-list.mdx b/docs/reference/hooks/use-session-list.mdx
index 71812d6d00..9f67db83e5 100644
--- a/docs/reference/hooks/use-session-list.mdx
+++ b/docs/reference/hooks/use-session-list.mdx
@@ -6,6 +6,8 @@ sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 
 The `useSessionList()` hook returns an array of [`Session`](/docs/reference/javascript/session) objects that have been registered on the client device.
 
+<Typedoc src="clerk-react/use-session-list-return" />
+
 ## Example
 
 ### Get a list of sessions
@@ -19,10 +21,8 @@ The following example uses `useSessionList()` to get a list of sessions that hav
   export default function Home() {
     const { isLoaded, sessions } = useSessionList()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return (
       <div>
@@ -39,13 +39,11 @@ The following example uses `useSessionList()` to get a list of sessions that hav
 
   import { useSessionList } from '@clerk/nextjs'
 
-  export default function HomePage() {
+  export default function Page() {
     const { isLoaded, sessions } = useSessionList()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return (
       <div>
@@ -57,16 +55,14 @@ The following example uses `useSessionList()` to get a list of sessions that hav
 </If>
 
 <If sdk="react-router">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/home.tsx' }}
   import { useSessionList } from '@clerk/react-router'
 
   export default function Home() {
     const { isLoaded, sessions } = useSessionList()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return (
       <div>
@@ -84,10 +80,8 @@ The following example uses `useSessionList()` to get a list of sessions that hav
   export default function Home() {
     const { isLoaded, sessions } = useSessionList()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return (
       <div>
@@ -99,7 +93,7 @@ The following example uses `useSessionList()` to get a list of sessions that hav
 </If>
 
 <If sdk="tanstack-react-start">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/index.tsx' }}
   import { useSessionList } from '@clerk/tanstack-react-start'
   import { createFileRoute } from '@tanstack/react-router'
 
@@ -110,10 +104,8 @@ The following example uses `useSessionList()` to get a list of sessions that hav
   export default function Home() {
     const { isLoaded, sessions } = useSessionList()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return (
       <div>
@@ -132,10 +124,8 @@ The following example uses `useSessionList()` to get a list of sessions that hav
   export default function Home() {
     const { isLoaded, sessions } = useSessionList()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
 
     return (
       <View>
@@ -145,5 +135,3 @@ The following example uses `useSessionList()` to get a list of sessions that hav
   }
   ```
 </If>
-
-<Typedoc src="clerk-react/use-session-list-return" />
diff --git a/docs/reference/hooks/use-session.mdx b/docs/reference/hooks/use-session.mdx
index a9682ade9a..602b127e19 100644
--- a/docs/reference/hooks/use-session.mdx
+++ b/docs/reference/hooks/use-session.mdx
@@ -6,6 +6,8 @@ sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 
 The `useSession()` hook provides access to the current user's [`Session`](/docs/reference/javascript/session) object, as well as helpers for setting the active session.
 
+<Typedoc src="clerk-react/use-session-return" />
+
 ## Example
 
 ### Access the `Session` object
@@ -19,14 +21,11 @@ The following example uses the `useSession()` hook to access the `Session` objec
   export default function Home() {
     const { isLoaded, session, isSignedIn } = useSession()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
-    if (!isSignedIn) {
-      // Handle signed out state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return (
       <div>
@@ -43,17 +42,14 @@ The following example uses the `useSession()` hook to access the `Session` objec
 
   import { useSession } from '@clerk/nextjs'
 
-  export default function HomePage() {
+  export default function Page() {
     const { isLoaded, session, isSignedIn } = useSession()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
-    if (!isSignedIn) {
-      // Handle signed out state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return (
       <div>
@@ -65,20 +61,17 @@ The following example uses the `useSession()` hook to access the `Session` objec
 </If>
 
 <If sdk="react-router">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/home.tsx' }}
   import { useSession } from '@clerk/react-router'
 
-  export default function HomePage() {
+  export default function Home() {
     const { isLoaded, session, isSignedIn } = useSession()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
-    if (!isSignedIn) {
-      // Handle signed out state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return (
       <div>
@@ -96,14 +89,11 @@ The following example uses the `useSession()` hook to access the `Session` objec
   export default function HomePage() {
     const { isLoaded, session, isSignedIn } = useSession()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
-    if (!isSignedIn) {
-      // Handle signed out state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return (
       <div>
@@ -115,7 +105,7 @@ The following example uses the `useSession()` hook to access the `Session` objec
 </If>
 
 <If sdk="tanstack-react-start">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/index.tsx' }}
   import { useSession } from '@clerk/tanstack-react-start'
   import { createFileRoute } from '@tanstack/react-router'
 
@@ -126,14 +116,11 @@ The following example uses the `useSession()` hook to access the `Session` objec
   function HomePage() {
     const { isLoaded, session, isSignedIn } = useSession()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
-    if (!isSignedIn) {
-      // Handle signed out state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return (
       <div>
@@ -152,14 +139,11 @@ The following example uses the `useSession()` hook to access the `Session` objec
   export default function HomePage() {
     const { isLoaded, session, isSignedIn } = useSession()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
-    if (!isSignedIn) {
-      // Handle signed out state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
+
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <View>Sign in to view this page</View>
 
     return (
       <View>
@@ -169,5 +153,3 @@ The following example uses the `useSession()` hook to access the `Session` objec
   }
   ```
 </If>
-
-<Typedoc src="clerk-react/use-session-return" />
diff --git a/docs/reference/hooks/use-sign-in.mdx b/docs/reference/hooks/use-sign-in.mdx
index cd4b7ab784..6ae2556094 100644
--- a/docs/reference/hooks/use-sign-in.mdx
+++ b/docs/reference/hooks/use-sign-in.mdx
@@ -6,6 +6,8 @@ sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 
 The `useSignIn()` hook provides access to the [`SignIn`](/docs/reference/javascript/sign-in) object, which allows you to check the current state of a sign-in attempt and manage the sign-in flow. You can use this to create a [custom sign-in flow](/docs/guides/development/custom-flows/overview#sign-in-flow).
 
+<Typedoc src="clerk-react/use-sign-in-return" />
+
 ## Examples
 
 ### Check the current state of a sign-in
@@ -19,10 +21,8 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
   export default function SignInPage() {
     const { isLoaded, signIn } = useSignIn()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return <div>The current sign-in attempt status is {signIn?.status}.</div>
   }
@@ -35,13 +35,11 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
 
   import { useSignIn } from '@clerk/nextjs'
 
-  export default function SignInPage() {
+  export default function Page() {
     const { isLoaded, signIn } = useSignIn()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return <div>The current sign-in attempt status is {signIn?.status}.</div>
   }
@@ -49,16 +47,14 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
 </If>
 
 <If sdk="react-router">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/sign-in.tsx' }}
   import { useSignIn } from '@clerk/react-router'
 
   export default function SignInPage() {
     const { isLoaded, signIn } = useSignIn()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return <div>The current sign-in attempt status is {signIn?.status}.</div>
   }
@@ -83,7 +79,7 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
 </If>
 
 <If sdk="tanstack-react-start">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/index.tsx' }}
   import { useSignIn } from '@clerk/tanstack-react-start'
   import { createFileRoute } from '@tanstack/react-router'
 
@@ -94,10 +90,8 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
   export default function SignInPage() {
     const { isLoaded, signIn } = useSignIn()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return <div>The current sign-in attempt status is {signIn?.status}.</div>
   }
@@ -112,10 +106,8 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
   export default function SignInPage() {
     const { isLoaded, signIn } = useSignIn()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
 
     return (
       <View>
@@ -129,5 +121,3 @@ The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs
 ### Create a custom sign-in flow with `useSignIn()`
 
 The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).
-
-<Typedoc src="clerk-react/use-sign-in-return" />
diff --git a/docs/reference/hooks/use-sign-up.mdx b/docs/reference/hooks/use-sign-up.mdx
index baf0c8027b..94d1479d24 100644
--- a/docs/reference/hooks/use-sign-up.mdx
+++ b/docs/reference/hooks/use-sign-up.mdx
@@ -6,6 +6,8 @@ sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 
 The `useSignUp()` hook provides access to the [`SignUp`](/docs/reference/javascript/sign-up) object, which allows you to check the current state of a sign-up attempt and manage the sign-up flow. You can use this to create a [custom sign-up flow](/docs/guides/development/custom-flows/overview#sign-up-flow).
 
+<Typedoc src="clerk-react/use-sign-up-return" />
+
 ## Examples
 
 ### Check the current state of a sign-up
@@ -19,10 +21,8 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
   export default function SignUpPage() {
     const { isLoaded, signUp } = useSignUp()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return <div>The current sign-up attempt status is {signUp?.status}.</div>
   }
@@ -35,13 +35,11 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
 
   import { useSignUp } from '@clerk/nextjs'
 
-  export default function SignUpPage() {
+  export default function Page() {
     const { isLoaded, signUp } = useSignUp()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return <div>The current sign-up attempt status is {signUp?.status}.</div>
   }
@@ -49,16 +47,14 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
 </If>
 
 <If sdk="react-router">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/sign-up.tsx' }}
   import { useSignUp } from '@clerk/react-router'
 
   export default function SignUpPage() {
     const { isLoaded, signUp } = useSignUp()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return <div>The current sign-up attempt status is {signUp?.status}.</div>
   }
@@ -72,10 +68,8 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
   export default function SignUpPage() {
     const { isLoaded, signUp } = useSignUp()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
     return <div>The current sign-up attempt status is {signUp?.status}.</div>
   }
@@ -83,7 +77,7 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
 </If>
 
 <If sdk="tanstack-react-start">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/index.tsx' }}
   import { useSignUp } from '@clerk/tanstack-react-start'
   import { createFileRoute } from '@tanstack/react-router'
 
@@ -94,10 +88,8 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
   export default function SignUpPage() {
     const { isLoaded, signUp } = useSignUp()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
 
     return <div>The current sign-up attempt status is {signUp?.status}.</div>
   }
@@ -112,10 +104,8 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
   export default function SignUpPage() {
     const { isLoaded, signUp } = useSignUp()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
 
     return (
       <View>
@@ -129,5 +119,3 @@ The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs
 ### Create a custom sign-up flow with `useSignUp()`
 
 The `useSignUp()` hook can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignUp()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).
-
-<Typedoc src="clerk-react/use-sign-up-return" />
diff --git a/docs/reference/hooks/use-statements.mdx b/docs/reference/hooks/use-statements.mdx
index 3ca865d625..5f10c260f8 100644
--- a/docs/reference/hooks/use-statements.mdx
+++ b/docs/reference/hooks/use-statements.mdx
@@ -8,6 +8,18 @@ sdk: nextjs, react
 
 The `useStatements()` hook provides access to the statements associated with a user or organization. It returns a paginated list of statements and includes methods for managing them.
 
+## Parameters
+
+`useStatements()` accepts a single optional object with the following properties:
+
+<Typedoc src="shared/hook-params" />
+
+## Returns
+
+`useStatements()` returns an object with the following properties:
+
+<Typedoc src="shared/use-statements-return" />
+
 ## Examples
 
 ### Basic usage
@@ -163,15 +175,3 @@ The following example demonstrates how to implement infinite scrolling with stat
   }
   ```
 </If>
-
-## Properties
-
-`useStatements()` accepts a single optional object with the following properties:
-
-<Typedoc src="shared/hook-params" />
-
-## Returns
-
-`useStatements()` returns an object with the following properties:
-
-<Typedoc src="shared/use-statements-return" />
diff --git a/docs/reference/hooks/use-subscription.mdx b/docs/reference/hooks/use-subscription.mdx
index b95729fa49..5e4677c79e 100644
--- a/docs/reference/hooks/use-subscription.mdx
+++ b/docs/reference/hooks/use-subscription.mdx
@@ -11,6 +11,18 @@ The `useSubscription()` hook provides access to subscription information for use
 > [!WARNING]
 > The `useSubscription()` hook should only be used for accessing and displaying subscription information. For authorization purposes (i.e., controlling access to features or content), use the [`has()`](/docs/guides/secure/authorization-checks#use-has-for-authorization-checks) helper or the [`<Protect>`](/docs/reference/components/control/protect) component instead.
 
+## Parameters
+
+`useSubscription()` accepts a single optional object with the following properties:
+
+<Typedoc src="shared/use-subscription-params" />
+
+## Returns
+
+`useSubscription()` returns an object with the following properties:
+
+<Typedoc src="shared/use-subscription-return" />
+
 ## Examples
 
 ### Basic usage
@@ -301,15 +313,3 @@ The following example shows how to handle subscription data with proper error st
   }
   ```
 </If>
-
-## Properties
-
-`useSubscription()` accepts a single optional object with the following properties:
-
-<Typedoc src="shared/use-subscription-params" />
-
-## Returns
-
-`useSubscription()` returns an object with the following properties:
-
-<Typedoc src="shared/use-subscription-return" />
diff --git a/docs/reference/hooks/use-user.mdx b/docs/reference/hooks/use-user.mdx
index 77856241cd..f555ea0db4 100644
--- a/docs/reference/hooks/use-user.mdx
+++ b/docs/reference/hooks/use-user.mdx
@@ -6,6 +6,8 @@ sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 
 The `useUser()` hook provides access to the current user's [`User`](/docs/reference/javascript/user) object, which contains all the data for a single user in your application and provides methods to manage their account. This hook also allows you to check if the user is signed in and if Clerk has loaded and initialized.
 
+<Typedoc src="clerk-react/use-user-return" />
+
 ## Example
 
 ### Get the current user
@@ -19,13 +21,11 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   export default function Example() {
     const { isSignedIn, user, isLoaded } = useUser()
 
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return <div>Hello {user.firstName}!</div>
   }
@@ -33,22 +33,19 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="nextjs">
-  ```tsx {{ filename: 'app/example/page.tsx' }}
+  ```tsx {{ filename: 'app/page.tsx' }}
   'use client'
 
   import { useUser } from '@clerk/nextjs'
 
-  export default function Example() {
+  export default function Page() {
     const { isSignedIn, user, isLoaded } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return <div>Loading...</div>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return <div>Hello {user.firstName}!</div>
   }
@@ -56,19 +53,17 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="react-router">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/home.tsx' }}
   import { useUser } from '@clerk/react-router'
 
-  export default function Example() {
+  export default function Home() {
     const { isSignedIn, user, isLoaded } = useUser()
 
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return <div>Hello {user.firstName}!</div>
   }
@@ -82,13 +77,11 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   export default function Example() {
     const { isSignedIn, user, isLoaded } = useUser()
 
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return <div>Hello {user.firstName}!</div>
   }
@@ -96,24 +89,22 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="tanstack-react-start">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/index.tsx' }}
   import { useUser } from '@clerk/tanstack-react-start'
   import { createFileRoute } from '@tanstack/react-router'
 
   export const Route = createFileRoute('/')({
-    component: Example,
+    component: Home,
   })
 
-  export default function Example() {
+  export default function Home() {
     const { isSignedIn, user, isLoaded } = useUser()
 
-    if (!isLoaded) {
-      return <div>Loading...</div>
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) {
-      return <div>Sign in to view this page</div>
-    }
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     return <div>Hello {user.firstName}!</div>
   }
@@ -121,20 +112,18 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/(user)/page.tsx' }}
+  ```tsx {{ filename: 'app/(user)/index.tsx' }}
   import { useUser } from '@clerk/clerk-expo'
   import { Text, View } from 'react-native'
 
-  export default function Example() {
+  export default function Page() {
     const { isSignedIn, user, isLoaded } = useUser()
 
-    if (!isLoaded) {
-      return <View>Loading...</View>
-    }
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
 
-    if (!isSignedIn) {
-      return <View>Sign in to view this page</View>
-    }
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <View>Sign in to view this page</View>
 
     return (
       <View>
@@ -150,18 +139,17 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 The following example uses the `useUser()` hook to access the [`User`](/docs/reference/javascript/user) object, which calls the [`update()`](/docs/reference/javascript/user#update) method to update the current user's information.
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/pages/Home.tsx' }}
+  ```tsx {{ filename: 'src/pages/Example.tsx' }}
   import { useUser } from '@clerk/clerk-react'
 
-  export default function Home() {
+  export default function Example() {
     const { isSignedIn, isLoaded, user } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) return null
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     const updateUser = async () => {
       await user.update({
@@ -187,15 +175,14 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 
   import { useUser } from '@clerk/nextjs'
 
-  export default function HomePage() {
+  export default function Page() {
     const { isSignedIn, isLoaded, user } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) return null
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     const updateUser = async () => {
       await user.update({
@@ -216,18 +203,17 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="react-router">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/home.tsx' }}
   import { useUser } from '@clerk/react-router'
 
   export default function Home() {
     const { isSignedIn, isLoaded, user } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) return null
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     const updateUser = async () => {
       await user.update({
@@ -254,12 +240,11 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   export default function Home() {
     const { isSignedIn, isLoaded, user } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) return null
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     const updateUser = async () => {
       await user.update({
@@ -280,7 +265,7 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="tanstack-react-start">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/index.tsx' }}
   import { useUser } from '@clerk/tanstack-react-start'
   import { createFileRoute } from '@tanstack/react-router'
 
@@ -291,12 +276,11 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   export default function Home() {
     const { isSignedIn, isLoaded, user } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) return null
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     const updateUser = async () => {
       await user.update({
@@ -317,19 +301,18 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/(user)/page.tsx' }}
+  ```tsx {{ filename: 'app/(user)/index.tsx' }}
   import { useUser } from '@clerk/clerk-expo'
   import { Text, View, TouchableOpacity } from 'react-native'
 
-  export default function Home() {
+  export default function Page() {
     const { isSignedIn, isLoaded, user } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
 
-    if (!isSignedIn) return null
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <View>Sign in to view this page</View>
 
     const updateUser = async () => {
       await user.update({
@@ -362,12 +345,11 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   export default function Home() {
     const { isSignedIn, isLoaded, user } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) return null
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     const updateUser = async () => {
       // Update data via an API endpoint
@@ -404,15 +386,14 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 
   import { useUser } from '@clerk/nextjs'
 
-  export default function HomePage() {
+  export default function Page() {
     const { isSignedIn, isLoaded, user } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) return null
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     const updateUser = async () => {
       // Update data via an API endpoint
@@ -444,18 +425,17 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="react-router">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/home.tsx' }}
   import { useUser } from '@clerk/react-router'
 
   export default function Home() {
     const { isSignedIn, isLoaded, user } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) return null
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     const updateUser = async () => {
       // Update data via an API endpoint
@@ -493,12 +473,11 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   export default function Home() {
     const { isSignedIn, isLoaded, user } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) return null
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     const updateUser = async () => {
       // Update data via an API endpoint
@@ -530,7 +509,7 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="tanstack-react-start">
-  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  ```tsx {{ filename: 'app/routes/index.tsx' }}
   import { useUser } from '@clerk/tanstack-react-start'
   import { createFileRoute } from '@tanstack/react-router'
 
@@ -541,12 +520,11 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   export default function Home() {
     const { isSignedIn, isLoaded, user } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
 
-    if (!isSignedIn) return null
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <div>Sign in to view this page</div>
 
     const updateUser = async () => {
       // Update data via an API endpoint
@@ -578,19 +556,18 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
 </If>
 
 <If sdk="expo">
-  ```tsx {{ filename: 'app/(user)/page.tsx' }}
+  ```tsx {{ filename: 'app/(user)/index.tsx' }}
   import { useUser } from '@clerk/clerk-expo'
   import { Text, View, TouchableOpacity } from 'react-native'
 
-  export default function Home() {
+  export default function Page() {
     const { isSignedIn, isLoaded, user } = useUser()
 
-    if (!isLoaded) {
-      // Handle loading state
-      return null
-    }
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
 
-    if (!isSignedIn) return null
+    // Protect the page from unauthenticated users
+    if (!isSignedIn) return <View>Sign in to view this page</View>
 
     const updateUser = async () => {
       // Update data via an API endpoint
@@ -622,5 +599,3 @@ The following example uses the `useUser()` hook to access the [`User`](/docs/ref
   }
   ```
 </If>
-
-<Typedoc src="clerk-react/use-user-return" />

From 7b1bbcb538e91458098cf58f95efc8301f80a236 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Thu, 16 Oct 2025 17:08:31 -0600
Subject: [PATCH 25/32] Fix headings for usePaymentElement

---
 docs/reference/hooks/use-payment-element.mdx | 4 ++++
 docs/reference/hooks/use-user.mdx            | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/reference/hooks/use-payment-element.mdx b/docs/reference/hooks/use-payment-element.mdx
index e1ef10b5c2..47e7c200fa 100644
--- a/docs/reference/hooks/use-payment-element.mdx
+++ b/docs/reference/hooks/use-payment-element.mdx
@@ -28,12 +28,16 @@ The `usePaymentElement()` hook works in conjunction with the `<PaymentElementPro
 
 The `<PaymentElementProvider />` component sets up the context for the payment element. It fetches all the necessary data from the payment provider (e.g., Stripe) and makes it available to its children.
 
+#### Properties
+
 <Typedoc src="shared/payment-element-provider-props" />
 
 ### `<PaymentElement />`
 
 This component renders the actual payment form from the provider (e.g., the Stripe Payment Element). It should be rendered as a child of `<PaymentElementProvider />`.
 
+#### Properties
+
 <Typedoc src="shared/payment-element-props" />
 
 ## Example
diff --git a/docs/reference/hooks/use-user.mdx b/docs/reference/hooks/use-user.mdx
index f555ea0db4..9db56ca3ca 100644
--- a/docs/reference/hooks/use-user.mdx
+++ b/docs/reference/hooks/use-user.mdx
@@ -8,7 +8,7 @@ The `useUser()` hook provides access to the current user's [`User`](/docs/refere
 
 <Typedoc src="clerk-react/use-user-return" />
 
-## Example
+## Examples
 
 ### Get the current user
 

From 3037a0da476fe0580f1f8a43c9e4f30abaee18e3 Mon Sep 17 00:00:00 2001
From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com>
Date: Wed, 22 Oct 2025 15:23:39 -0400
Subject: [PATCH 26/32] add back props

---
 docs/reference/hooks/use-checkout.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/reference/hooks/use-checkout.mdx b/docs/reference/hooks/use-checkout.mdx
index e8d90067ef..569f2cf5a1 100644
--- a/docs/reference/hooks/use-checkout.mdx
+++ b/docs/reference/hooks/use-checkout.mdx
@@ -29,6 +29,12 @@ There are two ways to use `useCheckout()`:
 
 The `<CheckoutProvider />` component is a wrapper that provides a checkout context to its children, allowing checkout state to be shared across multiple components. Child components can access the checkout context by calling `useCheckout()`.
 
+### Properties
+
+The `<CheckoutProvider />` component accepts the following props:
+
+<Typedoc src="shared/use-checkout-options" />
+
 ## Usage
 
 For the best user experience and to prevent potential errors, always wrap components using `useCheckout()` with both `<ClerkLoaded>` and `<SignedIn>` components. This ensures that the user is properly authenticated and Clerk is fully initialized before accessing checkout functionality.

From d0205db0ee87ef967f911b660d97be425365be68 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Fri, 24 Oct 2025 10:36:29 -0600
Subject: [PATCH 27/32] Fix linting

---
 docs/reference/hooks/use-payment-methods.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/reference/hooks/use-payment-methods.mdx b/docs/reference/hooks/use-payment-methods.mdx
index 4071156e4a..7afa8af3fc 100644
--- a/docs/reference/hooks/use-payment-methods.mdx
+++ b/docs/reference/hooks/use-payment-methods.mdx
@@ -221,6 +221,7 @@ The following example demonstrates how to use `usePaymentMethods()` in a checkou
         </div>
       )
     }
+  }
   ```
 </If>
 

From f05b02860892db2cb0b85bdaa8f456bf315a1828 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Fri, 24 Oct 2025 10:39:25 -0600
Subject: [PATCH 28/32] Fix linting

---
 docs/reference/hooks/use-checkout.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference/hooks/use-checkout.mdx b/docs/reference/hooks/use-checkout.mdx
index ee374aee43..b59469cabd 100644
--- a/docs/reference/hooks/use-checkout.mdx
+++ b/docs/reference/hooks/use-checkout.mdx
@@ -261,9 +261,9 @@ The `useCheckout()` hook can be used with a context provider for managing state
                 })
                 // Calling `.finalize` enables you to sync the client-side state with the server-side state of your users.
                 // It revalidates all authorization checks computed within server components.
-                 await finalize({
+                await finalize({
                   navigate: () => navigate('/dashboard'),
-                 })
+                })
               } catch (error) {
                 console.error('Payment failed:', error)
               } finally {

From b20ab60d73c1b9e2fae4ba16e9039f3840023287 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Fri, 24 Oct 2025 11:30:01 -0600
Subject: [PATCH 29/32] Final refinements code examples + add file names

---
 docs/reference/hooks/use-payment-attempts.mdx | 12 ++++++------
 docs/reference/hooks/use-payment-methods.mdx  | 12 ++++++------
 docs/reference/hooks/use-plans.mdx            | 10 ++++++----
 docs/reference/hooks/use-statements.mdx       |  8 ++++----
 docs/reference/hooks/use-subscription.mdx     | 13 ++++++++-----
 5 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/docs/reference/hooks/use-payment-attempts.mdx b/docs/reference/hooks/use-payment-attempts.mdx
index f4d136a0c3..0af99bc52e 100644
--- a/docs/reference/hooks/use-payment-attempts.mdx
+++ b/docs/reference/hooks/use-payment-attempts.mdx
@@ -27,7 +27,7 @@ The `usePaymentAttempts()` hook provides access to the payment attempts associat
 The following example demonstrates how to fetch and display a user's payment attempts.
 
 <If sdk="nextjs">
-  ```tsx
+  ```tsx {{ filename: 'app/billing/payment-attempts/page.tsx' }}
   import { usePaymentAttempts } from '@clerk/nextjs/experimental'
 
   function PaymentAttemptsList() {
@@ -60,7 +60,7 @@ The following example demonstrates how to fetch and display a user's payment att
 </If>
 
 <If sdk="react">
-  ```tsx
+  ```tsx {{ filename: 'src/pages/billing/PaymentAttemptsList.tsx' }}
   import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
 
   function PaymentAttemptsList() {
@@ -97,7 +97,7 @@ The following example demonstrates how to fetch and display a user's payment att
 The following example demonstrates how to implement infinite scrolling with payment attempts.
 
 <If sdk="nextjs">
-  ```tsx
+  ```tsx {{ filename: 'app/billing/payment-attempts/page.tsx' }}
   import { usePaymentAttempts } from '@clerk/nextjs/experimental'
 
   function InfinitePaymentAttempts() {
@@ -139,7 +139,7 @@ The following example demonstrates how to implement infinite scrolling with paym
 </If>
 
 <If sdk="react">
-  ```tsx
+  ```tsx {{ filename: 'src/pages/billing/PaymentAttemptsList.tsx' }}
   import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
 
   function InfinitePaymentAttempts() {
@@ -185,7 +185,7 @@ The following example demonstrates how to implement infinite scrolling with paym
 The following example demonstrates how to use `usePaymentAttempts()` to display a detailed payment history table.
 
 <If sdk="nextjs">
-  ```tsx
+  ```tsx {{ filename: 'app/billing/payment-attempts-history/page.tsx', collapsible: true }}
   import { usePaymentAttempts } from '@clerk/nextjs/experimental'
 
   function PaymentAttemptsHistory() {
@@ -243,7 +243,7 @@ The following example demonstrates how to use `usePaymentAttempts()` to display
 </If>
 
 <If sdk="react">
-  ```tsx
+  ```tsx {{ filename: 'src/pages/billing/PaymentAttemptsHistory.tsx', collapsible: true }}
   import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
 
   function PaymentAttemptsHistory() {
diff --git a/docs/reference/hooks/use-payment-methods.mdx b/docs/reference/hooks/use-payment-methods.mdx
index 7afa8af3fc..e847862a55 100644
--- a/docs/reference/hooks/use-payment-methods.mdx
+++ b/docs/reference/hooks/use-payment-methods.mdx
@@ -27,7 +27,7 @@ The `usePaymentMethods()` hook provides access to the payment methods associated
 The following example demonstrates how to fetch and display a user's payment methods.
 
 <If sdk="nextjs">
-  ```tsx
+  ```tsx {{ filename: 'app/billing/payment-methods/page.tsx' }}
   import { usePaymentMethods } from '@clerk/nextjs/experimental'
 
   function PaymentMethodsList() {
@@ -60,7 +60,7 @@ The following example demonstrates how to fetch and display a user's payment met
 </If>
 
 <If sdk="react">
-  ```tsx
+  ```tsx {{ filename: 'src/pages/billing/PaymentMethodsList.tsx' }}
   import { usePaymentMethods } from '@clerk/clerk-react/experimental'
 
   function PaymentMethodsList() {
@@ -97,7 +97,7 @@ The following example demonstrates how to fetch and display a user's payment met
 The following example demonstrates how to implement infinite scrolling with payment methods.
 
 <If sdk="nextjs">
-  ```tsx
+  ```tsx {{ filename: 'app/billing/payment-methods/page.tsx' }}
   import { usePaymentMethods } from '@clerk/nextjs/experimental'
 
   function InfinitePaymentMethods() {
@@ -136,7 +136,7 @@ The following example demonstrates how to implement infinite scrolling with paym
 </If>
 
 <If sdk="react">
-  ```tsx
+  ```tsx {{ filename: 'src/pages/billing/PaymentMethodsList.tsx' }}
   import { usePaymentMethods } from '@clerk/clerk-react/experimental'
 
   function InfinitePaymentMethods() {
@@ -179,7 +179,7 @@ The following example demonstrates how to implement infinite scrolling with paym
 The following example demonstrates how to use `usePaymentMethods()` in a checkout flow to select an existing payment method. For more information on how to build a checkout flow with an existing payment method, see [Build a custom checkout flow](/docs/guides/development/custom-flows/billing/checkout-new-payment-method).
 
 <If sdk="nextjs">
-  ```tsx
+  ```tsx {{ filename: 'app/billing/checkout/page.tsx' }}
   import { usePaymentMethods, useCheckout } from '@clerk/nextjs/experimental'
   import { useRouter } from 'next/navigation'
 
@@ -226,7 +226,7 @@ The following example demonstrates how to use `usePaymentMethods()` in a checkou
 </If>
 
 <If sdk="react">
-  ```tsx
+  ```tsx {{ filename: 'src/pages/billing/CheckoutPaymentSelection.tsx' }}
   import { usePaymentMethods, useCheckout } from '@clerk/clerk-react/experimental'
   import { useNavigate } from 'react-router-dom'
 
diff --git a/docs/reference/hooks/use-plans.mdx b/docs/reference/hooks/use-plans.mdx
index 111028e6c6..1564a67f11 100644
--- a/docs/reference/hooks/use-plans.mdx
+++ b/docs/reference/hooks/use-plans.mdx
@@ -27,8 +27,9 @@ The `usePlans()` hook provides access to the subscription plans available in you
 The following example shows how to fetch and display available plans.
 
 <If sdk="nextjs">
-  ```tsx
+  ```tsx {{ filename: 'app/billing/plans/page.tsx' }}
   'use client'
+
   import { usePlans } from '@clerk/nextjs/experimental'
 
   function PlansList() {
@@ -73,7 +74,7 @@ The following example shows how to fetch and display available plans.
 </If>
 
 <If sdk="react">
-  ```tsx
+  ```tsx {{ filename: 'src/pages/billing/PlansList.tsx' }}
   import { usePlans } from '@clerk/clerk-react/experimental'
 
   function PlansList() {
@@ -122,8 +123,9 @@ The following example shows how to fetch and display available plans.
 The following example demonstrates how to implement infinite scrolling with plans.
 
 <If sdk="nextjs">
-  ```tsx
+  ```tsx {{ filename: 'app/billing/plans/page.tsx' }}
   'use client'
+
   import { usePlans } from '@clerk/nextjs/experimental'
 
   function InfinitePlansList() {
@@ -170,7 +172,7 @@ The following example demonstrates how to implement infinite scrolling with plan
 </If>
 
 <If sdk="react">
-  ```tsx
+  ```tsx {{ filename: 'src/pages/billing/PlansList.tsx' }}
   import { usePlans } from '@clerk/clerk-react/experimental'
 
   function InfinitePlansList() {
diff --git a/docs/reference/hooks/use-statements.mdx b/docs/reference/hooks/use-statements.mdx
index 5f10c260f8..c9d3801680 100644
--- a/docs/reference/hooks/use-statements.mdx
+++ b/docs/reference/hooks/use-statements.mdx
@@ -27,7 +27,7 @@ The `useStatements()` hook provides access to the statements associated with a u
 The following example demonstrates how to fetch and display a user's statements.
 
 <If sdk="nextjs">
-  ```tsx
+  ```tsx {{ filename: 'app/billing/statements/page.tsx' }}
   import { useStatements } from '@clerk/nextjs/experimental'
 
   function StatementsList() {
@@ -60,7 +60,7 @@ The following example demonstrates how to fetch and display a user's statements.
 </If>
 
 <If sdk="react">
-  ```tsx
+  ```tsx {{ filename: 'src/pages/billing/StatementsList.tsx' }}
   import { useStatements } from '@clerk/clerk-react/experimental'
 
   function StatementsList() {
@@ -97,7 +97,7 @@ The following example demonstrates how to fetch and display a user's statements.
 The following example demonstrates how to implement infinite scrolling with statements.
 
 <If sdk="nextjs">
-  ```tsx
+  ```tsx {{ filename: 'app/billing/statements/page.tsx' }}
   import { useStatements } from '@clerk/nextjs/experimental'
 
   function InfiniteStatements() {
@@ -137,7 +137,7 @@ The following example demonstrates how to implement infinite scrolling with stat
 </If>
 
 <If sdk="react">
-  ```tsx
+  ```tsx {{ filename: 'src/pages/billing/StatementsList.tsx' }}
   import { useStatements } from '@clerk/clerk-react/experimental'
 
   function InfiniteStatements() {
diff --git a/docs/reference/hooks/use-subscription.mdx b/docs/reference/hooks/use-subscription.mdx
index 5e4677c79e..2bf6357a7f 100644
--- a/docs/reference/hooks/use-subscription.mdx
+++ b/docs/reference/hooks/use-subscription.mdx
@@ -30,8 +30,9 @@ The `useSubscription()` hook provides access to subscription information for use
 The following example shows how to fetch and display subscription information.
 
 <If sdk="nextjs">
-  ```tsx
+  ```tsx {{ filename: 'app/pricing/subscription-details/page.tsx' }}
   'use client'
+
   import { useSubscription } from '@clerk/nextjs/experimental'
 
   function SubscriptionInfo() {
@@ -60,7 +61,7 @@ The following example shows how to fetch and display subscription information.
 </If>
 
 <If sdk="react">
-  ```tsx
+  ```tsx {{ filename: 'src/pages/pricing/SubscriptionDetails.tsx' }}
   import { useSubscription } from '@clerk/clerk-react/experimental'
 
   function SubscriptionInfo() {
@@ -93,8 +94,9 @@ The following example shows how to fetch and display subscription information.
 The following example shows how to fetch an organization's subscription.
 
 <If sdk="nextjs">
-  ```tsx
+  ```tsx {{ filename: 'app/pricing/organization-subscription-details/page.tsx' }}
   'use client'
+
   import { useSubscription } from '@clerk/nextjs/experimental'
 
   function OrganizationSubscription() {
@@ -124,7 +126,7 @@ The following example shows how to fetch an organization's subscription.
 </If>
 
 <If sdk="react">
-  ```tsx
+  ```tsx {{ filename: 'src/pages/pricing/OrganizationSubscription.tsx' }}
   import { useSubscription } from '@clerk/clerk-react/experimental'
 
   function OrganizationSubscription() {
@@ -160,6 +162,7 @@ The following example shows how to handle subscription data with proper error st
 <If sdk="nextjs">
   ```tsx {{ filename: 'app/pricing/subscription-details/page.tsx', collapsible: true }}
   'use client'
+
   import { useSubscription } from '@clerk/nextjs/experimental'
 
   function SubscriptionDetails() {
@@ -237,7 +240,7 @@ The following example shows how to handle subscription data with proper error st
 </If>
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/pages/pricing/subscription-details/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'src/pages/pricing/SubscriptionDetails.tsx', collapsible: true }}
   import { useSubscription } from '@clerk/clerk-react/experimental'
 
   function SubscriptionDetails() {

From 1fa401ecd26e23865333168217aca54a65ecf8a8 Mon Sep 17 00:00:00 2001
From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com>
Date: Fri, 24 Oct 2025 16:06:55 -0400
Subject: [PATCH 30/32] add related guides to bottom of custom flow docs

---
 .../reference/hooks/use-organization-list.mdx | 17 ++++++++++++++
 docs/reference/hooks/use-organization.mdx     | 22 +++++++++++++++++++
 docs/reference/hooks/use-plans.mdx            | 12 ++++++++++
 docs/reference/hooks/use-reverification.mdx   |  4 ++++
 4 files changed, 55 insertions(+)

diff --git a/docs/reference/hooks/use-organization-list.mdx b/docs/reference/hooks/use-organization-list.mdx
index 5ee7e4d442..08c0fbb625 100644
--- a/docs/reference/hooks/use-organization-list.mdx
+++ b/docs/reference/hooks/use-organization-list.mdx
@@ -578,3 +578,20 @@ Notice the difference between this example's pagination and the infinite paginat
   }
   ```
 </If>
+
+## Related guides
+
+<Cards>
+  - [Build a custom organization switcher](/docs/guides/development/custom-flows/organizations/organization-switcher)
+  - Use Clerk's API to build a custom flow for switching between organizations
+
+  ---
+
+  - [Create organizations](/docs/guides/development/custom-flows/organizations/create-organizations)
+  - Use Clerk's API to build a custom flow for creating organizations
+
+  ---
+
+  - [Manage a user's organization invitations](/docs/guides/development/custom-flows/organizations/manage-user-org-invitations)
+  - Use Clerk's API to build a custom flow for managing user's organization invitations
+</Cards>
diff --git a/docs/reference/hooks/use-organization.mdx b/docs/reference/hooks/use-organization.mdx
index 1f18be6bc0..c47b9e9140 100644
--- a/docs/reference/hooks/use-organization.mdx
+++ b/docs/reference/hooks/use-organization.mdx
@@ -566,3 +566,25 @@ Notice the difference between this example's pagination and the infinite paginat
   }
   ```
 </If>
+
+## Related guides
+
+<Cards>
+  - [Update an organization](/docs/guides/development/custom-flows/organizations/update-organizations)
+  - Use Clerk's API to build a custom flow for updating an organization
+
+  ---
+
+  - [Manage roles in an organization](/docs/guides/development/custom-flows/organizations/manage-roles)
+  - Use Clerk's API to build a custom flow for managing roles in an organization
+
+  ---
+
+  - [Manage an organization's membership requests](/docs/guides/development/custom-flows/organizations/manage-membership-requests)
+  - Use Clerk's API to build a custom flow for managing an organization's membership requests
+
+  ---
+
+  - [Manage a user's organization invitations](/docs/guides/development/custom-flows/organizations/manage-user-org-invitations)
+  - Use Clerk's API to build a custom flow for managing user's organization invitations
+</Cards>
diff --git a/docs/reference/hooks/use-plans.mdx b/docs/reference/hooks/use-plans.mdx
index 1564a67f11..b5e07eda62 100644
--- a/docs/reference/hooks/use-plans.mdx
+++ b/docs/reference/hooks/use-plans.mdx
@@ -217,3 +217,15 @@ The following example demonstrates how to implement infinite scrolling with plan
   }
   ```
 </If>
+
+## Related guides
+
+<Cards>
+  - [Checkout flow with a new payment method](/docs/guides/development/custom-flows/billing/checkout-new-payment-method)
+  - Prompt users to add a new payment method during checkout
+
+  ---
+
+  - [Checkout flow for returning users](/docs/guides/development/custom-flows/billing/checkout-existing-payment-method)
+  - Prompt users to select an existing payment method during checkout
+</Cards>
diff --git a/docs/reference/hooks/use-reverification.mdx b/docs/reference/hooks/use-reverification.mdx
index 42b6fee473..f0ac0ad472 100644
--- a/docs/reference/hooks/use-reverification.mdx
+++ b/docs/reference/hooks/use-reverification.mdx
@@ -1940,3 +1940,7 @@ The `useReverification()` hook displays a prebuilt UI when the user needs to rev
     </Tabs>
   </Tab>
 </Tabs>
+
+## Related guides
+
+See the custom flow guides for examples of how to use the `useReverification()` hook, such as the [Add a phone number to a user's account](/docs/guides/development/custom-flows/account-updates/add-phone) guide.

From fb474808e3c889ca20d966032be7772e9a9032dc Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Thu, 30 Oct 2025 10:41:11 -0600
Subject: [PATCH 31/32] Export hook function + add use client

---
 .../billing/add-new-payment-method.mdx         |  1 +
 docs/reference/hooks/use-checkout.mdx          |  4 ++--
 docs/reference/hooks/use-payment-attempts.mdx  | 18 ++++++++++++------
 docs/reference/hooks/use-payment-methods.mdx   | 18 ++++++++++++------
 docs/reference/hooks/use-plans.mdx             |  8 ++++----
 docs/reference/hooks/use-statements.mdx        | 12 ++++++++----
 docs/reference/hooks/use-subscription.mdx      | 12 ++++++------
 7 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/docs/_partials/billing/add-new-payment-method.mdx b/docs/_partials/billing/add-new-payment-method.mdx
index a6682bc71d..7a310509e0 100644
--- a/docs/_partials/billing/add-new-payment-method.mdx
+++ b/docs/_partials/billing/add-new-payment-method.mdx
@@ -27,6 +27,7 @@ The following example demonstrates how to create a billing page where a user can
 
     ```tsx {{ filename: 'app/user/billing/AddPaymentMethodForm.tsx', collapsible: true }}
     'use client'
+
     import { useUser } from '@clerk/nextjs'
     import { usePaymentElement, PaymentElement } from '@clerk/nextjs/experimental'
     import { useState } from 'react'
diff --git a/docs/reference/hooks/use-checkout.mdx b/docs/reference/hooks/use-checkout.mdx
index b59469cabd..67a8d145f6 100644
--- a/docs/reference/hooks/use-checkout.mdx
+++ b/docs/reference/hooks/use-checkout.mdx
@@ -67,7 +67,7 @@ The `useCheckout()` hook can be used with a context provider for managing state
           import { ClerkLoaded } from '@clerk/nextjs'
           import { CheckoutFlow } from './CheckoutFlow'
 
-          export function SubscriptionPage() {
+          export default function SubscriptionPage() {
             // `<CheckoutProvider />` sets the context for the checkout flow.
             // Any child component can now call `useCheckout()` to access this context.
             return (
@@ -91,7 +91,7 @@ The `useCheckout()` hook can be used with a context provider for managing state
           import { ClerkLoaded } from '@clerk/clerk-react'
           import { CheckoutFlow } from './CheckoutFlow'
 
-          export function SubscriptionPage() {
+          export default function SubscriptionPage() {
             // `<CheckoutProvider />` sets the context for the checkout flow.
             // Any child component can now call `useCheckout()` to access this context.
             return (
diff --git a/docs/reference/hooks/use-payment-attempts.mdx b/docs/reference/hooks/use-payment-attempts.mdx
index 0af99bc52e..0fcd01a0a1 100644
--- a/docs/reference/hooks/use-payment-attempts.mdx
+++ b/docs/reference/hooks/use-payment-attempts.mdx
@@ -28,9 +28,11 @@ The following example demonstrates how to fetch and display a user's payment att
 
 <If sdk="nextjs">
   ```tsx {{ filename: 'app/billing/payment-attempts/page.tsx' }}
+  'use client'
+
   import { usePaymentAttempts } from '@clerk/nextjs/experimental'
 
-  function PaymentAttemptsList() {
+  export default function PaymentAttemptsList() {
     const { data, isLoading } = usePaymentAttempts({
       for: 'user',
       pageSize: 10,
@@ -63,7 +65,7 @@ The following example demonstrates how to fetch and display a user's payment att
   ```tsx {{ filename: 'src/pages/billing/PaymentAttemptsList.tsx' }}
   import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
 
-  function PaymentAttemptsList() {
+  export default function PaymentAttemptsList() {
     const { data, isLoading } = usePaymentAttempts({
       for: 'user',
       pageSize: 10,
@@ -98,9 +100,11 @@ The following example demonstrates how to implement infinite scrolling with paym
 
 <If sdk="nextjs">
   ```tsx {{ filename: 'app/billing/payment-attempts/page.tsx' }}
+  'use client'
+
   import { usePaymentAttempts } from '@clerk/nextjs/experimental'
 
-  function InfinitePaymentAttempts() {
+  export default function InfinitePaymentAttempts() {
     const { data, isLoading, hasNextPage, fetchNext } = usePaymentAttempts({
       for: 'user',
       infinite: true,
@@ -142,7 +146,7 @@ The following example demonstrates how to implement infinite scrolling with paym
   ```tsx {{ filename: 'src/pages/billing/PaymentAttemptsList.tsx' }}
   import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
 
-  function InfinitePaymentAttempts() {
+  export default function InfinitePaymentAttempts() {
     const { data, isLoading, hasNextPage, fetchNext } = usePaymentAttempts({
       for: 'user',
       infinite: true,
@@ -186,9 +190,11 @@ The following example demonstrates how to use `usePaymentAttempts()` to display
 
 <If sdk="nextjs">
   ```tsx {{ filename: 'app/billing/payment-attempts-history/page.tsx', collapsible: true }}
+  'use client'
+
   import { usePaymentAttempts } from '@clerk/nextjs/experimental'
 
-  function PaymentAttemptsHistory() {
+  export default function PaymentAttemptsHistory() {
     const { data, isLoading } = usePaymentAttempts({ for: 'user' })
 
     if (isLoading) {
@@ -246,7 +252,7 @@ The following example demonstrates how to use `usePaymentAttempts()` to display
   ```tsx {{ filename: 'src/pages/billing/PaymentAttemptsHistory.tsx', collapsible: true }}
   import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
 
-  function PaymentAttemptsHistory() {
+  export default function PaymentAttemptsHistory() {
     const { data, isLoading } = usePaymentAttempts({ for: 'user' })
 
     if (isLoading) {
diff --git a/docs/reference/hooks/use-payment-methods.mdx b/docs/reference/hooks/use-payment-methods.mdx
index e847862a55..9b39a23eac 100644
--- a/docs/reference/hooks/use-payment-methods.mdx
+++ b/docs/reference/hooks/use-payment-methods.mdx
@@ -28,9 +28,11 @@ The following example demonstrates how to fetch and display a user's payment met
 
 <If sdk="nextjs">
   ```tsx {{ filename: 'app/billing/payment-methods/page.tsx' }}
+  'use client'
+
   import { usePaymentMethods } from '@clerk/nextjs/experimental'
 
-  function PaymentMethodsList() {
+  export default function PaymentMethodsList() {
     const { data, isLoading } = usePaymentMethods({
       for: 'user',
       pageSize: 10,
@@ -63,7 +65,7 @@ The following example demonstrates how to fetch and display a user's payment met
   ```tsx {{ filename: 'src/pages/billing/PaymentMethodsList.tsx' }}
   import { usePaymentMethods } from '@clerk/clerk-react/experimental'
 
-  function PaymentMethodsList() {
+  export default function PaymentMethodsList() {
     const { data, isLoading } = usePaymentMethods({
       for: 'user',
       pageSize: 10,
@@ -98,9 +100,11 @@ The following example demonstrates how to implement infinite scrolling with paym
 
 <If sdk="nextjs">
   ```tsx {{ filename: 'app/billing/payment-methods/page.tsx' }}
+  'use client'
+
   import { usePaymentMethods } from '@clerk/nextjs/experimental'
 
-  function InfinitePaymentMethods() {
+  export default function InfinitePaymentMethods() {
     const { data, isLoading, hasNextPage, fetchNext } = usePaymentMethods({
       for: 'user',
       infinite: true,
@@ -139,7 +143,7 @@ The following example demonstrates how to implement infinite scrolling with paym
   ```tsx {{ filename: 'src/pages/billing/PaymentMethodsList.tsx' }}
   import { usePaymentMethods } from '@clerk/clerk-react/experimental'
 
-  function InfinitePaymentMethods() {
+  export default function InfinitePaymentMethods() {
     const { data, isLoading, hasNextPage, fetchNext } = usePaymentMethods({
       for: 'user',
       infinite: true,
@@ -180,10 +184,12 @@ The following example demonstrates how to use `usePaymentMethods()` in a checkou
 
 <If sdk="nextjs">
   ```tsx {{ filename: 'app/billing/checkout/page.tsx' }}
+  'use client'
+
   import { usePaymentMethods, useCheckout } from '@clerk/nextjs/experimental'
   import { useRouter } from 'next/navigation'
 
-  function CheckoutPaymentSelection() {
+  export default function CheckoutPaymentSelection() {
     const { data, isLoading } = usePaymentMethods({ for: 'user' })
     const { checkout } = useCheckout()
     const { confirm, finalize } = checkout
@@ -230,7 +236,7 @@ The following example demonstrates how to use `usePaymentMethods()` in a checkou
   import { usePaymentMethods, useCheckout } from '@clerk/clerk-react/experimental'
   import { useNavigate } from 'react-router-dom'
 
-  function CheckoutPaymentSelection() {
+  export default function CheckoutPaymentSelection() {
     const { data, isLoading } = usePaymentMethods({ for: 'user' })
     const { checkout } = useCheckout()
     const { confirm, finalize } = checkout
diff --git a/docs/reference/hooks/use-plans.mdx b/docs/reference/hooks/use-plans.mdx
index b5e07eda62..e17b93112e 100644
--- a/docs/reference/hooks/use-plans.mdx
+++ b/docs/reference/hooks/use-plans.mdx
@@ -32,7 +32,7 @@ The following example shows how to fetch and display available plans.
 
   import { usePlans } from '@clerk/nextjs/experimental'
 
-  function PlansList() {
+  export default function PlansList() {
     const { data, isLoading, hasNextPage, fetchNext, hasPreviousPage, fetchPrevious } = usePlans({
       for: 'user',
       pageSize: 10,
@@ -77,7 +77,7 @@ The following example shows how to fetch and display available plans.
   ```tsx {{ filename: 'src/pages/billing/PlansList.tsx' }}
   import { usePlans } from '@clerk/clerk-react/experimental'
 
-  function PlansList() {
+  export default function PlansList() {
     const { data, isLoading, hasNextPage, fetchNext, hasPreviousPage, fetchPrevious } = usePlans({
       for: 'user',
       pageSize: 10,
@@ -128,7 +128,7 @@ The following example demonstrates how to implement infinite scrolling with plan
 
   import { usePlans } from '@clerk/nextjs/experimental'
 
-  function InfinitePlansList() {
+  export default function InfinitePlansList() {
     const { data, isLoading, hasNextPage, fetchNext } = usePlans({
       for: 'user',
       infinite: true,
@@ -175,7 +175,7 @@ The following example demonstrates how to implement infinite scrolling with plan
   ```tsx {{ filename: 'src/pages/billing/PlansList.tsx' }}
   import { usePlans } from '@clerk/clerk-react/experimental'
 
-  function InfinitePlansList() {
+  export default function InfinitePlansList() {
     const { data, isLoading, hasNextPage, fetchNext } = usePlans({
       for: 'user',
       infinite: true,
diff --git a/docs/reference/hooks/use-statements.mdx b/docs/reference/hooks/use-statements.mdx
index c9d3801680..f6629081f6 100644
--- a/docs/reference/hooks/use-statements.mdx
+++ b/docs/reference/hooks/use-statements.mdx
@@ -28,9 +28,11 @@ The following example demonstrates how to fetch and display a user's statements.
 
 <If sdk="nextjs">
   ```tsx {{ filename: 'app/billing/statements/page.tsx' }}
+  'use client'
+
   import { useStatements } from '@clerk/nextjs/experimental'
 
-  function StatementsList() {
+  export default function StatementsList() {
     const { data, isLoading } = useStatements({
       for: 'user',
       pageSize: 10,
@@ -63,7 +65,7 @@ The following example demonstrates how to fetch and display a user's statements.
   ```tsx {{ filename: 'src/pages/billing/StatementsList.tsx' }}
   import { useStatements } from '@clerk/clerk-react/experimental'
 
-  function StatementsList() {
+  export default function StatementsList() {
     const { data, isLoading } = useStatements({
       for: 'user',
       pageSize: 10,
@@ -98,9 +100,11 @@ The following example demonstrates how to implement infinite scrolling with stat
 
 <If sdk="nextjs">
   ```tsx {{ filename: 'app/billing/statements/page.tsx' }}
+  'use client'
+
   import { useStatements } from '@clerk/nextjs/experimental'
 
-  function InfiniteStatements() {
+  export default function InfiniteStatements() {
     const { data, isLoading, hasNextPage, fetchNext } = useStatements({
       for: 'user',
       infinite: true,
@@ -140,7 +144,7 @@ The following example demonstrates how to implement infinite scrolling with stat
   ```tsx {{ filename: 'src/pages/billing/StatementsList.tsx' }}
   import { useStatements } from '@clerk/clerk-react/experimental'
 
-  function InfiniteStatements() {
+  export default function InfiniteStatements() {
     const { data, isLoading, hasNextPage, fetchNext } = useStatements({
       for: 'user',
       infinite: true,
diff --git a/docs/reference/hooks/use-subscription.mdx b/docs/reference/hooks/use-subscription.mdx
index 2bf6357a7f..45d15ac568 100644
--- a/docs/reference/hooks/use-subscription.mdx
+++ b/docs/reference/hooks/use-subscription.mdx
@@ -35,7 +35,7 @@ The following example shows how to fetch and display subscription information.
 
   import { useSubscription } from '@clerk/nextjs/experimental'
 
-  function SubscriptionInfo() {
+  export default function SubscriptionInfo() {
     const { data, isLoading, error } = useSubscription()
 
     if (isLoading) {
@@ -64,7 +64,7 @@ The following example shows how to fetch and display subscription information.
   ```tsx {{ filename: 'src/pages/pricing/SubscriptionDetails.tsx' }}
   import { useSubscription } from '@clerk/clerk-react/experimental'
 
-  function SubscriptionInfo() {
+  export default function SubscriptionInfo() {
     const { data, isLoading, error } = useSubscription()
 
     if (isLoading) {
@@ -99,7 +99,7 @@ The following example shows how to fetch an organization's subscription.
 
   import { useSubscription } from '@clerk/nextjs/experimental'
 
-  function OrganizationSubscription() {
+  export default function OrganizationSubscription() {
     const { data, isLoading, revalidate } = useSubscription({
       for: 'organization',
       keepPreviousData: true,
@@ -129,7 +129,7 @@ The following example shows how to fetch an organization's subscription.
   ```tsx {{ filename: 'src/pages/pricing/OrganizationSubscription.tsx' }}
   import { useSubscription } from '@clerk/clerk-react/experimental'
 
-  function OrganizationSubscription() {
+  export default function OrganizationSubscription() {
     const { data, isLoading, revalidate } = useSubscription({
       for: 'organization',
       keepPreviousData: true,
@@ -165,7 +165,7 @@ The following example shows how to handle subscription data with proper error st
 
   import { useSubscription } from '@clerk/nextjs/experimental'
 
-  function SubscriptionDetails() {
+  export function SubscriptionDetails() {
     const { data: subscription, isLoading } = useSubscription()
 
     if (isLoading) {
@@ -243,7 +243,7 @@ The following example shows how to handle subscription data with proper error st
   ```tsx {{ filename: 'src/pages/pricing/SubscriptionDetails.tsx', collapsible: true }}
   import { useSubscription } from '@clerk/clerk-react/experimental'
 
-  function SubscriptionDetails() {
+  export function SubscriptionDetails() {
     const { data: subscription, isLoading } = useSubscription()
 
     if (isLoading) {

From 24174bb2ab2cd91b421c228aeca1794046dc548d Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Mon, 3 Nov 2025 15:56:49 -0600
Subject: [PATCH 32/32] Fix new typedoc links

---
 docs/reference/hooks/use-organization-list.mdx                | 2 +-
 docs/reference/hooks/use-subscription.mdx                     | 2 +-
 docs/reference/javascript/types/billing-checkout-resource.mdx | 4 ++--
 docs/reference/javascript/types/billing-checkout-totals.mdx   | 2 +-
 docs/reference/javascript/types/billing-money-amount.mdx      | 2 +-
 docs/reference/javascript/types/billing-payer-resource.mdx    | 2 +-
 .../javascript/types/billing-payment-method-resource.mdx      | 2 +-
 docs/reference/javascript/types/billing-payment-resource.mdx  | 2 +-
 docs/reference/javascript/types/billing-plan-resource.mdx     | 2 +-
 docs/reference/javascript/types/billing-statement-group.mdx   | 2 +-
 .../reference/javascript/types/billing-statement-resource.mdx | 2 +-
 docs/reference/javascript/types/billing-statement-totals.mdx  | 2 +-
 .../javascript/types/billing-subscription-item-resource.mdx   | 2 +-
 .../javascript/types/billing-subscription-resource.mdx        | 2 +-
 docs/reference/javascript/types/deleted-object-resource.mdx   | 2 +-
 docs/reference/javascript/types/feature-resource.mdx          | 2 +-
 .../javascript/types/organization-custom-role-key.mdx         | 2 +-
 17 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/docs/reference/hooks/use-organization-list.mdx b/docs/reference/hooks/use-organization-list.mdx
index 08c0fbb625..45f0da002a 100644
--- a/docs/reference/hooks/use-organization-list.mdx
+++ b/docs/reference/hooks/use-organization-list.mdx
@@ -29,7 +29,7 @@ Optional properties that are shared across the `userMemberships`, `userInvitatio
 
 ### `CreateOrganizationParams`
 
-<Typedoc src="types/create-organization-params" />
+<Typedoc src="shared/create-organization-params" />
 
 ### `PaginatedResources`
 
diff --git a/docs/reference/hooks/use-subscription.mdx b/docs/reference/hooks/use-subscription.mdx
index 45d15ac568..bee6c67a3a 100644
--- a/docs/reference/hooks/use-subscription.mdx
+++ b/docs/reference/hooks/use-subscription.mdx
@@ -21,7 +21,7 @@ The `useSubscription()` hook provides access to subscription information for use
 
 `useSubscription()` returns an object with the following properties:
 
-<Typedoc src="shared/use-subscription-return" />
+<Typedoc src="shared/subscription-result" />
 
 ## Examples
 
diff --git a/docs/reference/javascript/types/billing-checkout-resource.mdx b/docs/reference/javascript/types/billing-checkout-resource.mdx
index 2a87a795fc..c71d51a5fa 100644
--- a/docs/reference/javascript/types/billing-checkout-resource.mdx
+++ b/docs/reference/javascript/types/billing-checkout-resource.mdx
@@ -6,7 +6,7 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/billing-checkout-resource" />
+<Typedoc src="shared/billing-checkout-resource" />
 
 ### `confirm()`
 
@@ -14,4 +14,4 @@ The `confirm()` function is used to confirm and finalize the checkout process, u
 
 #### Parameters
 
-<Typedoc src="types/confirm-checkout-params" />
+<Typedoc src="shared/confirm-checkout-params" />
diff --git a/docs/reference/javascript/types/billing-checkout-totals.mdx b/docs/reference/javascript/types/billing-checkout-totals.mdx
index 8820161bfd..f31852bd29 100644
--- a/docs/reference/javascript/types/billing-checkout-totals.mdx
+++ b/docs/reference/javascript/types/billing-checkout-totals.mdx
@@ -6,4 +6,4 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/billing-checkout-totals" />
+<Typedoc src="shared/billing-checkout-totals" />
diff --git a/docs/reference/javascript/types/billing-money-amount.mdx b/docs/reference/javascript/types/billing-money-amount.mdx
index 3dbfb2ef2a..e972f01d14 100644
--- a/docs/reference/javascript/types/billing-money-amount.mdx
+++ b/docs/reference/javascript/types/billing-money-amount.mdx
@@ -6,4 +6,4 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/billing-money-amount" />
+<Typedoc src="shared/billing-money-amount" />
diff --git a/docs/reference/javascript/types/billing-payer-resource.mdx b/docs/reference/javascript/types/billing-payer-resource.mdx
index 49cbc9bcea..90f3c67d5f 100644
--- a/docs/reference/javascript/types/billing-payer-resource.mdx
+++ b/docs/reference/javascript/types/billing-payer-resource.mdx
@@ -6,4 +6,4 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/billing-payer-resource" />
+<Typedoc src="shared/billing-payer-resource" />
diff --git a/docs/reference/javascript/types/billing-payment-method-resource.mdx b/docs/reference/javascript/types/billing-payment-method-resource.mdx
index 06d40f0735..ca547bae8b 100644
--- a/docs/reference/javascript/types/billing-payment-method-resource.mdx
+++ b/docs/reference/javascript/types/billing-payment-method-resource.mdx
@@ -6,4 +6,4 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/billing-payment-method-resource" />
+<Typedoc src="shared/billing-payment-method-resource" />
diff --git a/docs/reference/javascript/types/billing-payment-resource.mdx b/docs/reference/javascript/types/billing-payment-resource.mdx
index 77b5b8bf57..190923cb8e 100644
--- a/docs/reference/javascript/types/billing-payment-resource.mdx
+++ b/docs/reference/javascript/types/billing-payment-resource.mdx
@@ -6,4 +6,4 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/billing-payment-resource" />
+<Typedoc src="shared/billing-payment-resource" />
diff --git a/docs/reference/javascript/types/billing-plan-resource.mdx b/docs/reference/javascript/types/billing-plan-resource.mdx
index c177446325..03acfb1609 100644
--- a/docs/reference/javascript/types/billing-plan-resource.mdx
+++ b/docs/reference/javascript/types/billing-plan-resource.mdx
@@ -6,4 +6,4 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/billing-plan-resource" />
+<Typedoc src="shared/billing-plan-resource" />
diff --git a/docs/reference/javascript/types/billing-statement-group.mdx b/docs/reference/javascript/types/billing-statement-group.mdx
index dcb3a60a82..b57e6dc318 100644
--- a/docs/reference/javascript/types/billing-statement-group.mdx
+++ b/docs/reference/javascript/types/billing-statement-group.mdx
@@ -6,4 +6,4 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/billing-statement-group" />
+<Typedoc src="shared/billing-statement-group" />
diff --git a/docs/reference/javascript/types/billing-statement-resource.mdx b/docs/reference/javascript/types/billing-statement-resource.mdx
index 608a41eaf0..8d17c865bc 100644
--- a/docs/reference/javascript/types/billing-statement-resource.mdx
+++ b/docs/reference/javascript/types/billing-statement-resource.mdx
@@ -6,4 +6,4 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/billing-statement-resource" />
+<Typedoc src="shared/billing-statement-resource" />
diff --git a/docs/reference/javascript/types/billing-statement-totals.mdx b/docs/reference/javascript/types/billing-statement-totals.mdx
index 990c43b4bd..947d9acc80 100644
--- a/docs/reference/javascript/types/billing-statement-totals.mdx
+++ b/docs/reference/javascript/types/billing-statement-totals.mdx
@@ -6,4 +6,4 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/billing-statement-totals" />
+<Typedoc src="shared/billing-statement-totals" />
diff --git a/docs/reference/javascript/types/billing-subscription-item-resource.mdx b/docs/reference/javascript/types/billing-subscription-item-resource.mdx
index b135229343..30010f1d7c 100644
--- a/docs/reference/javascript/types/billing-subscription-item-resource.mdx
+++ b/docs/reference/javascript/types/billing-subscription-item-resource.mdx
@@ -6,4 +6,4 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/billing-subscription-item-resource" />
+<Typedoc src="shared/billing-subscription-item-resource" />
diff --git a/docs/reference/javascript/types/billing-subscription-resource.mdx b/docs/reference/javascript/types/billing-subscription-resource.mdx
index 2d11c38fe6..e3094b28ac 100644
--- a/docs/reference/javascript/types/billing-subscription-resource.mdx
+++ b/docs/reference/javascript/types/billing-subscription-resource.mdx
@@ -6,4 +6,4 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/billing-subscription-resource" />
+<Typedoc src="shared/billing-subscription-resource" />
diff --git a/docs/reference/javascript/types/deleted-object-resource.mdx b/docs/reference/javascript/types/deleted-object-resource.mdx
index 2e9e1fe7eb..bca13bc5d8 100644
--- a/docs/reference/javascript/types/deleted-object-resource.mdx
+++ b/docs/reference/javascript/types/deleted-object-resource.mdx
@@ -4,4 +4,4 @@ description: The DeletedObjectResource class represents an item that has been de
 sdk: js-frontend
 ---
 
-<Typedoc src="types/deleted-object-resource" />
+<Typedoc src="shared/deleted-object-resource" />
diff --git a/docs/reference/javascript/types/feature-resource.mdx b/docs/reference/javascript/types/feature-resource.mdx
index 7c50b0c01b..bc56438a36 100644
--- a/docs/reference/javascript/types/feature-resource.mdx
+++ b/docs/reference/javascript/types/feature-resource.mdx
@@ -6,4 +6,4 @@ sdk: js-frontend
 
 <Include src="_partials/billing/billing-experimental" />
 
-<Typedoc src="types/feature-resource" />
+<Typedoc src="shared/feature-resource" />
diff --git a/docs/reference/javascript/types/organization-custom-role-key.mdx b/docs/reference/javascript/types/organization-custom-role-key.mdx
index 73797fdf05..653850c0d5 100644
--- a/docs/reference/javascript/types/organization-custom-role-key.mdx
+++ b/docs/reference/javascript/types/organization-custom-role-key.mdx
@@ -4,4 +4,4 @@ description: A type that represents the user's role in an organization.
 sdk: js-frontend
 ---
 
-<Typedoc src="types/organization-custom-role-key" />
+<Typedoc src="shared/organization-custom-role-key" />