diff --git a/docs/_partials/billing/add-new-payment-method.mdx b/docs/_partials/billing/add-new-payment-method.mdx
index 80e5bde2f6..7a310509e0 100644
--- a/docs/_partials/billing/add-new-payment-method.mdx
+++ b/docs/_partials/billing/add-new-payment-method.mdx
@@ -3,80 +3,162 @@ 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.
 
-<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
-      }
+<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>
 
-      setError(null)
-      setIsSubmitting(true)
+          <ClerkLoaded>
+            <PaymentElementProvider for="user">
+              <AddPaymentMethodForm />
+            </PaymentElementProvider>
+          </ClerkLoaded>
+        </div>
+      )
+    }
+    ```
 
-      try {
-        // 1. Submit the form to the payment provider to get a payment token
-        const { data, error } = await submit()
+    ```tsx {{ filename: 'app/user/billing/AddPaymentMethodForm.tsx', collapsible: true }}
+    'use client'
 
-        // Usually a validation error from stripe that you can ignore.
-        if (error) {
-          setIsSubmitting(false)
+    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
         }
 
-        // 2. Use the token to add the payment source to the user
-        await user.addPaymentSource(data)
+        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
+          }
 
-        // 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)
+          // 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>
+
+<If sdk="react">
+  <CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
+    ```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'
+
+    export default function Page() {
+      return (
+        <div>
+          <h1>Billing Settings</h1>
+
+          <ClerkLoaded>
+            <PaymentElementProvider for="user">
+              <AddPaymentMethodForm />
+            </PaymentElementProvider>
+          </ClerkLoaded>
+        </div>
+      )
     }
+    ```
+
+    ```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'
+
+    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()
 
-    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>
+          // 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>
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/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>
diff --git a/docs/guides/development/upgrading/upgrade-guides/core-2/react.mdx b/docs/guides/development/upgrading/upgrade-guides/core-2/react.mdx
index 82505d23ea..faded75d62 100644
--- a/docs/guides/development/upgrading/upgrade-guides/core-2/react.mdx
+++ b/docs/guides/development/upgrading/upgrade-guides/core-2/react.mdx
@@ -554,7 +554,7 @@ As part of this major version, a number of previously deprecated props, argument
   </AccordionPanel>
 
   <AccordionPanel>
-    The `membershipList` param from the `useOrganization` hook has been removed. Instead, [use the `memberships` param](/docs/reference/hooks/use-organization#properties). Examples of each can be seen here:
+    The `membershipList` param from the `useOrganization` hook has been removed. Instead, [use the `memberships` param](/docs/reference/hooks/use-organization). Examples of each can be seen here:
 
     ```js
     // before
diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index c3a88e0313..78b92253ed 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -1,7 +1,308 @@
 ---
 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
 ---
 
-<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>
+
+<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.
+
+<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()
+    }
+
+    // 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>
+        <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 Page() {
+    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()
+    }
+
+    // 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>
+        <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/home.tsx' }}
+  import { useAuth } from '@clerk/react-router'
+
+  export default function Home() {
+    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()
+    }
+
+    // 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>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="astro">
+  ```tsx {{ filename: 'src/components/external-data.jsx' }}
+  import { useAuth } from '@clerk/astro/react'
+  import { useState } from 'react'
+
+  export default function ExternalData() {
+    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)
+    }
+
+    // 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>
+        <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 ExternalData from '../components/external-data'
+  ---
+
+  <ExternalData client:load />
+  ```
+</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()
+    }
+
+    // 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>
+        <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/index.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()
+    }
+
+    // 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>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/external-data.tsx' }}
+  import { useAuth } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity } from 'react-native'
+
+  export default function ExternalData() {
+    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()
+    }
+
+    // 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>
+        <Text>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </Text>
+        <TouchableOpacity onPress={fetchExternalData}>
+          <Text>Fetch Data</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-checkout.mdx b/docs/reference/hooks/use-checkout.mdx
index 1670a3d375..67a8d145f6 100644
--- a/docs/reference/hooks/use-checkout.mdx
+++ b/docs/reference/hooks/use-checkout.mdx
@@ -13,156 +13,17 @@ 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>
+<Typedoc src="clerk-react/experimental_use-checkout-params" />
 
 ### `UseCheckoutOptions`
 
-<Include src="_partials/billing/use-checkout-options" />
+<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.
 
-<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>[BillingPaymentMethodResource](/docs/reference/javascript/types/billing-payment-method-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?: { navigate?: SetActiveNavigate }) => void`
-
-  A function that finalizes the checkout process. Can optionally accept a `navigate()` function to redirect the user after completion.
-
-  ---
-
-  - `clear()`
-  - `() => void`
-
-  A function that clears the current checkout state from the cache.
-</Properties>
+<Typedoc src="shared/use-checkout-return" />
 
 ## `<CheckoutProvider />`
 
@@ -170,7 +31,9 @@ The `<CheckoutProvider />` component is a wrapper that provides a checkout conte
 
 ### Properties
 
-<Include src="_partials/billing/use-checkout-options" />
+The `<CheckoutProvider />` component accepts the following props:
+
+<Typedoc src="shared/use-checkout-options" />
 
 ## Usage
 
@@ -198,124 +61,247 @@ 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 default 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 default 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 { useRouter } from 'next/navigation'
+          import { useCheckout } from '@clerk/nextjs/experimental'
+          import { useState } from 'react'
+          import { useRouter } from 'next/navigation'
 
-        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 router = useRouter()
-
-          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.
-              await finalize({
-                navigate: () => router.push('/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 router = useRouter()
+
+            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.
+                await finalize({
+                  navigate: () => router.push('/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>
 
-              {error && <div>{error.message}</div>}
+        <If sdk="react">
+          ```tsx {{ filename: 'src/components/CheckoutFlow.tsx', collapsible: true }}
+          import { useCheckout } from '@clerk/clerk-react/experimental'
+          import { useState } from 'react'
+          import { useNavigate } from 'react-router-dom'
 
-              <button type="button" disabled={isProcessing || isConfirming} onClick={submitSelectedMethod}>
-                {isProcessing || isConfirming ? 'Processing...' : 'Complete Purchase'}
+          export function CheckoutFlow() {
+            const { checkout } = useCheckout()
+            const { status } = checkout
+
+            if (status === 'needs_initialization') {
+              return <CheckoutInitialization />
+            }
+
+            return (
+              <div className="checkout-container">
+                <CheckoutSummary />
+                <PaymentSection />
+              </div>
+            )
+          }
+
+          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>
-            </>
-          )
-        }
+            )
+          }
 
-        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 navigate = useNavigate()
+
+            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.
+                await finalize({
+                  navigate: () => navigate('/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>
@@ -325,48 +311,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-clerk.mdx b/docs/reference/hooks/use-clerk.mdx
index 26e922f2d2..6217300d2f 100644
--- a/docs/reference/hooks/use-clerk.mdx
+++ b/docs/reference/hooks/use-clerk.mdx
@@ -1,7 +1,102 @@
 ---
 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
 ---
 
-<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.
+
+<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/Example.tsx' }}
+  import { useClerk } from '@clerk/clerk-react'
+
+  export default function Example() {
+    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 Page() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/home.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="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/index.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()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/(clerk)/index.tsx' }}
+  import { useClerk } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity } from 'react-native'
+
+  export default function Page() {
+    const clerk = useClerk()
+
+    return (
+      <View>
+        <TouchableOpacity onPress={() => clerk.openSignIn({})}>
+          <Text>Sign in</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-organization-list.mdx b/docs/reference/hooks/use-organization-list.mdx
index 81441df8fc..45f0da002a 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="shared/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>
@@ -643,33 +579,19 @@ 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" />
+## Related guides
 
-> [!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.
+<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
 
-### Shared properties
+  ---
 
-Optional properties that are shared across the `userMemberships`, `userInvitations`, and `userSuggestions` properties.
+  - [Create organizations](/docs/guides/development/custom-flows/organizations/create-organizations)
+  - Use Clerk's API to build a custom flow for creating organizations
 
-<Typedoc src="shared/pages-or-infinite-options" />
+  ---
 
-<Typedoc src="shared/paginated-hook-config" />
-
-## Returns
-
-<Typedoc src="shared/use-organization-list-return" />
-
-### `CreateOrganizationParams`
-
-<Typedoc src="shared/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).
+  - [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 bbe695eaec..c47b9e9140 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
@@ -44,7 +74,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() {
@@ -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>
@@ -347,7 +324,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() {
@@ -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>
@@ -643,32 +567,24 @@ Notice the difference between this example's pagination and the infinite paginat
   ```
 </If>
 
-## Properties
+## Related guides
 
-`useOrganization()` accepts a single object with the following optional properties:
+<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
 
-<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.
+  - [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
 
-### Shared properties
+  ---
 
-Optional properties that are shared across the `invitations`, `membershipRequests`, `memberships`, and `domains` properties.
+  - [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
 
-<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).
+  - [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-payment-attempts.mdx b/docs/reference/hooks/use-payment-attempts.mdx
index 968eb44acc..0fcd01a0a1 100644
--- a/docs/reference/hooks/use-payment-attempts.mdx
+++ b/docs/reference/hooks/use-payment-attempts.mdx
@@ -10,289 +10,298 @@ The `usePaymentAttempts()` hook provides access to the payment attempts associat
 
 ## Parameters
 
-`usePaymentAttempts()` accepts a single object with the following properties:
+`usePaymentAttempts()` accepts a single optional 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>
+<Typedoc src="shared/hook-params" />
 
 ## 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.
+<Typedoc src="shared/use-payment-attempts-return" />
 
-  ---
-
-  - `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.
-
-  ---
+## Examples
 
-  - `fetchPage`
-  - `(page: number) => void`
+### Basic usage
 
-  A function that triggers a specific page to be loaded.
+The following example demonstrates how to fetch and display a user's payment attempts.
 
-  ---
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/billing/payment-attempts/page.tsx' }}
+  'use client'
 
-  - `isError`
-  - `boolean`
+  import { usePaymentAttempts } from '@clerk/nextjs/experimental'
 
-  A boolean that indicates the request failed.
+  export default function PaymentAttemptsList() {
+    const { data, isLoading } = usePaymentAttempts({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  ---
+    if (isLoading) {
+      return <div>Loading payment attempts...</div>
+    }
 
-  - `page`
-  - `number`
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
 
-  The current page.
+    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>
 
-  ---
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/billing/PaymentAttemptsList.tsx' }}
+  import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
 
-  - `revalidate`
-  - <code>() => Promise\<void></code>
+  export default function PaymentAttemptsList() {
+    const { data, isLoading } = usePaymentAttempts({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  A function that triggers a revalidation of the current page.
+    if (isLoading) {
+      return <div>Loading payment attempts...</div>
+    }
 
-  ---
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
 
-  - `setData`
-  - `(data: any[]) => void`
+    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>
 
-  A function that allows you to set the data manually.
-</Properties>
+### Infinite pagination
 
-## Examples
+The following example demonstrates how to implement infinite scrolling with payment attempts.
 
-### Basic usage
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/billing/payment-attempts/page.tsx' }}
+  'use client'
 
-The following example demonstrates how to fetch and display a user's payment attempts.
+  import { usePaymentAttempts } from '@clerk/nextjs/experimental'
 
-```tsx
-import { usePaymentAttempts } from '@clerk/nextjs/experimental'
+  export default 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>
+        <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 {{ filename: 'src/pages/billing/PaymentAttemptsList.tsx' }}
+  import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
+
+  export default function InfinitePaymentAttempts() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePaymentAttempts({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
+
+    if (isLoading) {
+      return <div>Loading...</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 (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
 
-### Infinite pagination
+    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>
 
-The following example demonstrates how to implement infinite scrolling with payment attempts.
+### Payment attempts history table
 
-```tsx
-import { usePaymentAttempts } from '@clerk/nextjs/experimental'
+The following example demonstrates how to use `usePaymentAttempts()` to display a detailed payment history table.
 
-function InfinitePaymentAttempts() {
-  const { data, isLoading, hasNextPage, fetchNext } = usePaymentAttempts({
-    for: 'user',
-    infinite: true,
-    pageSize: 20,
-  })
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/billing/payment-attempts-history/page.tsx', collapsible: true }}
+  'use client'
 
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
+  import { usePaymentAttempts } from '@clerk/nextjs/experimental'
 
-  if (!data || data.length === 0) {
-    return <div>No payment attempts found.</div>
-  }
+  export default function PaymentAttemptsHistory() {
+    const { data, isLoading } = usePaymentAttempts({ for: 'user' })
 
-  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>
+    if (isLoading) {
+      return <div>Loading payment attempts...</div>
+    }
 
-      {hasNextPage && <button onClick={() => fetchNext()}>Load more payment attempts</button>}
-    </div>
-  )
-}
-```
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
 
-### Payment attempts history table
+    const getStatusColor = (status: string) => {
+      switch (status) {
+        case 'paid':
+          return 'green'
+        case 'failed':
+          return 'red'
+        case 'pending':
+          return 'orange'
+        default:
+          return 'gray'
+      }
+    }
 
-The following example demonstrates how to use `usePaymentAttempts()` to display a detailed payment history table.
+    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>
 
-```tsx
-import { usePaymentAttempts } from '@clerk/nextjs/experimental'
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/billing/PaymentAttemptsHistory.tsx', collapsible: true }}
+  import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
 
-function PaymentAttemptsHistory() {
-  const { data, isLoading } = usePaymentAttempts({ for: 'user' })
+  export default function PaymentAttemptsHistory() {
+    const { data, isLoading } = usePaymentAttempts({ for: 'user' })
 
-  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>
+    }
 
-  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>
+    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-element.mdx b/docs/reference/hooks/use-payment-element.mdx
index 92ceef79e0..47e7c200fa 100644
--- a/docs/reference/hooks/use-payment-element.mdx
+++ b/docs/reference/hooks/use-payment-element.mdx
@@ -18,40 +18,7 @@ This hook must be used within a component that is a descendant of the `<PaymentE
 
 `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
 
@@ -63,33 +30,7 @@ The `<PaymentElementProvider />` component sets up the context for the payment e
 
 #### 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 />`
 
@@ -97,14 +38,9 @@ This component renders the actual payment form from the provider (e.g., the Stri
 
 #### 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
+## Example
 
 <Include src="_partials/billing/add-new-payment-method" />
 
diff --git a/docs/reference/hooks/use-payment-methods.mdx b/docs/reference/hooks/use-payment-methods.mdx
index e80c8c9d11..9b39a23eac 100644
--- a/docs/reference/hooks/use-payment-methods.mdx
+++ b/docs/reference/hooks/use-payment-methods.mdx
@@ -10,237 +10,273 @@ The `usePaymentMethods()` hook provides access to the payment methods associated
 
 ## Parameters
 
-`usePaymentMethods()` accepts a single object with the following properties:
+`usePaymentMethods()` accepts a single optional 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>
+<Typedoc src="shared/hook-params" />
 
 ## Returns
 
 `usePaymentMethods()` returns an object with the following properties:
 
-<Properties>
-  - `data`
-  - <code>[BillingPaymentMethodResource](/docs/reference/javascript/types/billing-payment-method-resource)\[] | null</code>
-
-  An array of [payment methods](/docs/reference/javascript/types/billing-payment-method-resource), or `null` if the data hasn't been loaded yet.
+<Typedoc src="shared/use-payment-methods-return" />
 
-  ---
-
-  - `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.
+## Examples
 
-  ---
+### Basic usage
 
-  - `pageCount`
-  - `number`
+The following example demonstrates how to fetch and display a user's payment methods.
 
-  The total number of available pages.
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/billing/payment-methods/page.tsx' }}
+  'use client'
 
-  ---
+  import { usePaymentMethods } from '@clerk/nextjs/experimental'
 
-  - `count`
-  - `number`
+  export default function PaymentMethodsList() {
+    const { data, isLoading } = usePaymentMethods({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  The total number of payment methods available.
-</Properties>
+    if (isLoading) {
+      return <div>Loading payment methods...</div>
+    }
 
-## Examples
+    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>
+    }
 
-### Basic usage
+    return (
+      <ul>
+        {data?.map((method) => (
+          <li key={method.id}>
+            {method.cardType} **** {method.last4}
+            {method.isDefault ? ' (Default)' : null}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+  ```
+</If>
 
-The following example demonstrates how to fetch and display a user's payment methods.
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/billing/PaymentMethodsList.tsx' }}
+  import { usePaymentMethods } from '@clerk/clerk-react/experimental'
 
-```tsx
-import { usePaymentMethods } from '@clerk/nextjs/experimental'
+  export default function PaymentMethodsList() {
+    const { data, isLoading } = usePaymentMethods({
+      for: 'user',
+      pageSize: 10,
+    })
 
-function PaymentMethodsList() {
-  const { data, isLoading } = usePaymentMethods({
-    for: 'user',
-    pageSize: 10,
-  })
+    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/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 (
+      <ul>
+        {data?.map((method) => (
+          <li key={method.id}>
+            {method.cardType} **** {method.last4}
+            {method.isDefault ? ' (Default)' : null}
+          </li>
+        ))}
+      </ul>
+    )
   }
-
-  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 {{ filename: 'app/billing/payment-methods/page.tsx' }}
+  'use client'
 
-function InfinitePaymentMethods() {
-  const { data, isLoading, hasNextPage, fetchNext } = usePaymentMethods({
-    for: 'user',
-    infinite: true,
-    pageSize: 20,
-  })
+  import { usePaymentMethods } from '@clerk/nextjs/experimental'
 
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
+  export default function InfinitePaymentMethods() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePaymentMethods({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
+
+    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 {{ filename: 'src/pages/billing/PaymentMethodsList.tsx' }}
+  import { usePaymentMethods } from '@clerk/clerk-react/experimental'
+
+  export default 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'
-import { useRouter } from 'next/navigation'
-
-function CheckoutPaymentSelection() {
-  const { data, isLoading } = usePaymentMethods({ for: 'user' })
-  const { checkout } = useCheckout()
-  const { confirm, finalize } = checkout
-
-  const router = useRouter()
-
-  const handlePaymentSubmit = async (paymentMethodId: string) => {
-    try {
-      // Confirm checkout with selected payment method
-      await confirm({ paymentSourceId: paymentMethodId })
-      // Complete checkout and redirect
-      await finalize({
-        navigate: () => router.push('/dashboard'),
-      })
-    } catch (error) {
-      console.error('Payment failed:', error)
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/billing/checkout/page.tsx' }}
+  'use client'
+
+  import { usePaymentMethods, useCheckout } from '@clerk/nextjs/experimental'
+  import { useRouter } from 'next/navigation'
+
+  export default function CheckoutPaymentSelection() {
+    const { data, isLoading } = usePaymentMethods({ for: 'user' })
+    const { checkout } = useCheckout()
+    const { confirm, finalize } = checkout
+    const router = useRouter()
+
+    const handlePaymentSubmit = async (paymentMethodId: string) => {
+      try {
+        // Confirm checkout with selected payment method
+        await confirm({ paymentSourceId: paymentMethodId })
+        // Complete checkout and redirect
+        await finalize({
+          navigate: () => router.push('/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>
+      )
     }
   }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/billing/CheckoutPaymentSelection.tsx' }}
+  import { usePaymentMethods, useCheckout } from '@clerk/clerk-react/experimental'
+  import { useNavigate } from 'react-router-dom'
+
+  export default function CheckoutPaymentSelection() {
+    const { data, isLoading } = usePaymentMethods({ for: 'user' })
+    const { checkout } = useCheckout()
+    const { confirm, finalize } = checkout
+    const navigate = useNavigate()
+
+    const handlePaymentSubmit = async (paymentMethodId: string) => {
+      try {
+        // Confirm checkout with selected payment method
+        await confirm({ paymentSourceId: paymentMethodId })
+        // Complete checkout and redirect
+        await finalize({
+          navigate: () => navigate('/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>
-  )
-}
-```
+    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..e17b93112e 100644
--- a/docs/reference/hooks/use-plans.mdx
+++ b/docs/reference/hooks/use-plans.mdx
@@ -10,109 +10,15 @@ The `usePlans()` hook provides access to the subscription plans available in you
 
 ## Parameters
 
-`usePlans()` accepts a single object with the following properties:
+`usePlans()` accepts a single optional 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>
+<Typedoc src="shared/hook-params" />
 
 ## 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>
+<Typedoc src="shared/use-plans-return" />
 
 ## Examples
 
@@ -120,71 +26,68 @@ 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'
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/billing/plans/page.tsx' }}
+  'use client'
 
-function PlansList() {
-  const { data, isLoading, hasNextPage, fetchNext, hasPreviousPage, fetchPrevious } = usePlans({
-    for: 'user',
-    pageSize: 10,
-  })
+  import { usePlans } from '@clerk/nextjs/experimental'
 
-  if (isLoading) {
-    return <div>Loading plans...</div>
-  }
+  export default function PlansList() {
+    const { data, isLoading, hasNextPage, fetchNext, hasPreviousPage, fetchPrevious } = usePlans({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  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>
-  )
-}
-```
+    if (isLoading) {
+      return <div>Loading plans...</div>
+    }
 
-### Infinite pagination
+    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 {{ filename: 'src/pages/billing/PlansList.tsx' }}
+  import { usePlans } from '@clerk/clerk-react/experimental'
 
-function InfinitePlansList() {
-  const { data, isLoading, hasNextPage, fetchNext } = usePlans({
-    for: 'user',
-    infinite: true,
-    pageSize: 2,
-  })
+  export default 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 +109,123 @@ function InfinitePlansList() {
             </ul>
           </li>
         ))}
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Next</button>}
+        {hasPreviousPage && <button onClick={() => fetchPrevious()}>Previous</button>}
       </ul>
+    )
+  }
+  ```
+</If>
+
+### Infinite pagination
+
+The following example demonstrates how to implement infinite scrolling with plans.
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/billing/plans/page.tsx' }}
+  'use client'
+
+  import { usePlans } from '@clerk/nextjs/experimental'
+
+  export default 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 {{ filename: 'src/pages/billing/PlansList.tsx' }}
+  import { usePlans } from '@clerk/clerk-react/experimental'
+
+  export default 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>
+
+## 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
+
+  ---
 
-      {hasNextPage && <button onClick={() => fetchNext()}>Load more plans</button>}
-    </div>
-  )
-}
-```
+  - [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 6dfb5ce007..f0ac0ad472 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'
@@ -1983,50 +1941,6 @@ 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>
-
-### `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>
-
-### `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`
+## Related guides
 
-  The verification level required for the reverification process.
-</Properties>
+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.
diff --git a/docs/reference/hooks/use-session-list.mdx b/docs/reference/hooks/use-session-list.mdx
index 5cc504fb2f..9f67db83e5 100644
--- a/docs/reference/hooks/use-session-list.mdx
+++ b/docs/reference/hooks/use-session-list.mdx
@@ -1,7 +1,137 @@
 ---
 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
 ---
 
-<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.
+
+<Typedoc src="clerk-react/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/pages/Home.tsx' }}
+  import { useSessionList } from '@clerk/clerk-react'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/home/page.tsx' }}
+  'use client'
+
+  import { useSessionList } from '@clerk/nextjs'
+
+  export default function Page() {
+    const { isLoaded, sessions } = useSessionList()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/home.tsx' }}
+  import { useSessionList } from '@clerk/react-router'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    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()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    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/index.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()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/(session-list)/page.tsx' }}
+  import { useSessionList } from '@clerk/clerk-expo'
+  import { Text, View } from 'react-native'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
+
+    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 93af5b99cc..602b127e19 100644
--- a/docs/reference/hooks/use-session.mdx
+++ b/docs/reference/hooks/use-session.mdx
@@ -1,7 +1,155 @@
 ---
 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
 ---
 
-<Typedoc src="clerk-react/use-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.
+
+<Typedoc src="clerk-react/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/pages/Home.tsx' }}
+  import { useSession } from '@clerk/clerk-react'
+
+  export default function Home() {
+    const { isLoaded, session, isSignedIn } = useSession()
+
+    // 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>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/home/page.tsx' }}
+  'use client'
+
+  import { useSession } from '@clerk/nextjs'
+
+  export default function Page() {
+    const { isLoaded, session, isSignedIn } = useSession()
+
+    // 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>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/home.tsx' }}
+  import { useSession } from '@clerk/react-router'
+
+  export default function Home() {
+    const { isLoaded, session, isSignedIn } = useSession()
+
+    // 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>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useSession } from '@clerk/chrome-extension'
+
+  export default function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
+
+    // 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>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/index.tsx' }}
+  import { useSession } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/')({
+    component: HomePage,
+  })
+
+  function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
+
+    // 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>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/(session)/page.tsx' }}
+  import { useSession } from '@clerk/clerk-expo'
+  import { Text, View } from 'react-native'
+
+  export default function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
+
+    // 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>
+        <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 bddec03f46..6ae2556094 100644
--- a/docs/reference/hooks/use-sign-in.mdx
+++ b/docs/reference/hooks/use-sign-in.mdx
@@ -1,7 +1,123 @@
 ---
 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
 ---
 
-<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).
+
+<Typedoc src="clerk-react/use-sign-in-return" />
+
+## 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()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    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 Page() {
+    const { isLoaded, signIn } = useSignIn()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/sign-in.tsx' }}
+  import { useSignIn } from '@clerk/react-router'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    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="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/index.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()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/(auth)/sign-in.tsx' }}
+  import { useSignIn } from '@clerk/clerk-expo'
+  import { Text, View } from 'react-native'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
+
+    return (
+      <View>
+        <Text>The current sign-in attempt status is {signIn?.status}.</Text>
+      </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 e9d38edece..94d1479d24 100644
--- a/docs/reference/hooks/use-sign-up.mdx
+++ b/docs/reference/hooks/use-sign-up.mdx
@@ -1,7 +1,121 @@
 ---
 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
 ---
 
-<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).
+
+<Typedoc src="clerk-react/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()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    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 Page() {
+    const { isLoaded, signUp } = useSignUp()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/sign-up.tsx' }}
+  import { useSignUp } from '@clerk/react-router'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    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()
+
+    // Handle loading state
+    if (!isLoaded) return <div>Loading...</div>
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/index.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()
+
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/(auth)/sign-up.tsx' }}
+  import { useSignUp } from '@clerk/clerk-expo'
+  import { Text, View } from 'react-native'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    // Handle loading state
+    if (!isLoaded) return <View>Loading...</View>
+
+    return (
+      <View>
+        <Text>The current sign-up attempt status is {signUp?.status}.</Text>
+      </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-statements.mdx b/docs/reference/hooks/use-statements.mdx
index 679f736a4c..f6629081f6 100644
--- a/docs/reference/hooks/use-statements.mdx
+++ b/docs/reference/hooks/use-statements.mdx
@@ -10,151 +10,15 @@ The `useStatements()` hook provides access to the statements associated with a u
 
 ## Parameters
 
-`useStatements()` accepts a single object with the following properties:
+`useStatements()` accepts a single optional 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>
+<Typedoc src="shared/hook-params" />
 
 ## 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>
+<Typedoc src="shared/use-statements-return" />
 
 ## Examples
 
@@ -162,75 +26,156 @@ 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 {{ filename: 'app/billing/statements/page.tsx' }}
+  'use client'
 
-function StatementsList() {
-  const { data, isLoading } = useStatements({
-    for: 'user',
-    pageSize: 10,
-  })
+  import { useStatements } from '@clerk/nextjs/experimental'
 
-  if (isLoading) {
-    return <div>Loading statements...</div>
-  }
+  export default function StatementsList() {
+    const { data, isLoading } = useStatements({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  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>
-  )
-}
-```
-
-### Infinite pagination
+    if (!data || data.length === 0) {
+      return <div>No statements found.</div>
+    }
 
-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 {{ filename: 'src/pages/billing/StatementsList.tsx' }}
+  import { useStatements } from '@clerk/clerk-react/experimental'
 
-function InfiniteStatements() {
-  const { data, isLoading, hasNextPage, fetchNext } = useStatements({
-    for: 'user',
-    infinite: true,
-    pageSize: 20,
-  })
+  export default 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>
+
+### Infinite pagination
 
-      {hasNextPage && <button onClick={() => fetchNext()}>Load more statements</button>}
-    </div>
-  )
-}
-```
+The following example demonstrates how to implement infinite scrolling with statements.
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/billing/statements/page.tsx' }}
+  'use client'
+
+  import { useStatements } from '@clerk/nextjs/experimental'
+
+  export default 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 {{ filename: 'src/pages/billing/StatementsList.tsx' }}
+  import { useStatements } from '@clerk/clerk-react/experimental'
+
+  export default 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..bee6c67a3a 100644
--- a/docs/reference/hooks/use-subscription.mdx
+++ b/docs/reference/hooks/use-subscription.mdx
@@ -15,203 +15,304 @@ The `useSubscription()` hook provides access to subscription information for use
 
 `useSubscription()` accepts a single optional object with the following properties:
 
-<Properties>
-  - `for?`
-  - `'organization' | 'user'`
+<Typedoc src="shared/use-subscription-params" />
 
-  Specifies whether to fetch subscription for an organization or user. Defaults to `'user'`.
+## Returns
 
-  ---
+`useSubscription()` returns an object with the following properties:
 
-  - `keepPreviousData?`
-  - `boolean`
+<Typedoc src="shared/subscription-result" />
 
-  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>
+## Examples
 
-## Returns
+### Basic usage
 
-`useSubscription()` returns an object with the following properties:
+The following example shows how to fetch and display subscription information.
 
-<Properties>
-  - `data`
-  - <code>[`BillingSubscriptionResource`](/docs/reference/javascript/types/billing-subscription-resource) | null</code>
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/pricing/subscription-details/page.tsx' }}
+  'use client'
 
-  The subscription object, or `null` if the data hasn't been loaded yet.
+  import { useSubscription } from '@clerk/nextjs/experimental'
 
-  ---
+  export default function SubscriptionInfo() {
+    const { data, isLoading, error } = useSubscription()
 
-  - `isLoading`
-  - `boolean`
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
 
-  A boolean that indicates whether the initial data is still being fetched.
+    if (error) {
+      return <div>Error loading subscription: {error.message}</div>
+    }
 
-  ---
+    if (!data) {
+      return <div>No subscription found</div>
+    }
 
-  - `isFetching`
-  - `boolean`
+    return (
+      <div>
+        <h2>Your Subscription</h2>
+        {/* Display subscription details */}
+      </div>
+    )
+  }
+  ```
+</If>
 
-  A boolean that indicates whether any request is still in flight, including background updates.
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/pricing/SubscriptionDetails.tsx' }}
+  import { useSubscription } from '@clerk/clerk-react/experimental'
 
-  ---
+  export default function SubscriptionInfo() {
+    const { data, isLoading, error } = useSubscription()
 
-  - `error`
-  - `Error | null`
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
 
-  Any error that occurred during the data fetch, or `null` if no error occurred.
+    if (error) {
+      return <div>Error loading subscription: {error.message}</div>
+    }
 
-  ---
+    if (!data) {
+      return <div>No subscription found</div>
+    }
 
-  - `revalidate`
-  - `() => Promise<void>`
+    return (
+      <div>
+        <h2>Your Subscription</h2>
+        {/* Display subscription details */}
+      </div>
+    )
+  }
+  ```
+</If>
 
-  Function to manually trigger a refresh of the subscription data.
-</Properties>
+### Organization subscription
 
-## Examples
+The following example shows how to fetch an organization's subscription.
 
-### Basic usage
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/pricing/organization-subscription-details/page.tsx' }}
+  'use client'
 
-The following example shows how to fetch and display subscription information.
+  import { useSubscription } from '@clerk/nextjs/experimental'
 
-```tsx
-'use client'
-import { useSubscription } from '@clerk/nextjs/experimental'
+  export default function OrganizationSubscription() {
+    const { data, isLoading, revalidate } = useSubscription({
+      for: 'organization',
+      keepPreviousData: true,
+    })
 
-function SubscriptionInfo() {
-  const { data, isLoading, error } = useSubscription()
+    const handleSubscriptionUpdate = async () => {
+      // After making changes to the subscription
+      await revalidate()
+    }
 
-  if (isLoading) {
-    return <div>Loading subscription...</div>
-  }
+    if (isLoading) {
+      return <div>Loading organization subscription...</div>
+    }
 
-  if (error) {
-    return <div>Error loading subscription: {error.message}</div>
+    return (
+      <div>
+        <h2>Organization Subscription</h2>
+        {/* Display organization subscription details */}
+        <button onClick={handleSubscriptionUpdate}>Refresh Subscription</button>
+      </div>
+    )
   }
+  ```
+</If>
 
-  if (!data) {
-    return <div>No subscription found</div>
-  }
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/pricing/OrganizationSubscription.tsx' }}
+  import { useSubscription } from '@clerk/clerk-react/experimental'
 
-  return (
-    <div>
-      <h2>Your Subscription</h2>
-      {/* Display subscription details */}
-    </div>
-  )
-}
-```
+  export default function OrganizationSubscription() {
+    const { data, isLoading, revalidate } = useSubscription({
+      for: 'organization',
+      keepPreviousData: true,
+    })
 
-### Organization subscription
+    const handleSubscriptionUpdate = async () => {
+      // After making changes to the subscription
+      await revalidate()
+    }
 
-The following example shows how to fetch an organization's subscription.
+    if (isLoading) {
+      return <div>Loading organization subscription...</div>
+    }
 
-```tsx
-'use client'
-import { useSubscription } from '@clerk/nextjs/experimental'
+    return (
+      <div>
+        <h2>Organization Subscription</h2>
+        {/* Display organization subscription details */}
+        <button onClick={handleSubscriptionUpdate}>Refresh Subscription</button>
+      </div>
+    )
+  }
+  ```
+</If>
 
-function OrganizationSubscription() {
-  const { data, isLoading, revalidate } = useSubscription({
-    for: 'organization',
-    keepPreviousData: true,
-  })
+### With error handling
 
-  const handleSubscriptionUpdate = async () => {
-    // After making changes to the subscription
-    await revalidate()
-  }
+The following example shows how to handle subscription data with proper error states.
 
-  if (isLoading) {
-    return <div>Loading organization subscription...</div>
-  }
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/pricing/subscription-details/page.tsx', collapsible: true }}
+  'use client'
 
-  return (
-    <div>
-      <h2>Organization Subscription</h2>
-      {/* Display organization subscription details */}
-      <button onClick={handleSubscriptionUpdate}>Refresh Subscription</button>
-    </div>
-  )
-}
-```
+  import { useSubscription } from '@clerk/nextjs/experimental'
 
-### With error handling
+  export function SubscriptionDetails() {
+    const { data: subscription, isLoading } = useSubscription()
 
-The following example shows how to handle subscription data with proper error states.
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
 
-```tsx {{ filename: 'app/pricing/subscription-details/page.tsx' }}
-'use client'
-import { useSubscription } from '@clerk/nextjs/experimental'
+    if (!subscription) {
+      return <div>No subscription</div>
+    }
 
-function SubscriptionDetails() {
-  const { data: subscription, isLoading } = useSubscription()
+    return (
+      <div className="subscription-details">
+        <h2>Subscription Details</h2>
+        <div className="status">
+          Status: <span className={`status-${subscription.status}`}>{subscription.status}</span>
+        </div>
 
-  if (isLoading) {
-    return <div>Loading subscription...</div>
-  }
+        <div className="dates">
+          <p>Active since: {subscription.activeAt.toLocaleDateString()}</p>
+          {subscription.pastDueAt && (
+            <p className="warning">Past due since: {subscription.pastDueAt.toLocaleDateString()}</p>
+          )}
+        </div>
 
-  if (!subscription) {
-    return <div>No subscription</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>
+        )}
 
-  return (
-    <div className="subscription-details">
-      <h2>Subscription Details</h2>
-      <div className="status">
-        Status: <span className={`status-${subscription.status}`}>{subscription.status}</span>
+        <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>
+      )
+    }
 
-      <div className="dates">
-        <p>Active since: {subscription.activeAt.toLocaleDateString()}</p>
-        {subscription.pastDueAt && (
-          <p className="warning">Past due since: {subscription.pastDueAt.toLocaleDateString()}</p>
+    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>
 
-      {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 sdk="react">
+  ```tsx {{ filename: 'src/pages/pricing/SubscriptionDetails.tsx', collapsible: true }}
+  import { useSubscription } from '@clerk/clerk-react/experimental'
+
+  export 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 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()
+  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>
+      )
+    }
 
-  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-status">
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <>
+            <div className="status-indicator">{isFetching && <span>Refreshing...</span>}</div>
+            {data ? <SubscriptionDetails /> : <div>No active subscription</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>
-  )
-}
-```
+  ```
+</If>
diff --git a/docs/reference/hooks/use-user.mdx b/docs/reference/hooks/use-user.mdx
index 2322c9d0bd..9db56ca3ca 100644
--- a/docs/reference/hooks/use-user.mdx
+++ b/docs/reference/hooks/use-user.mdx
@@ -1,7 +1,601 @@
 ---
 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
 ---
 
-<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.
+
+<Typedoc src="clerk-react/use-user-return" />
+
+## Examples
+
+### 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/pages/Example.tsx' }}
+  import { useUser } from '@clerk/clerk-react'
+
+  export default function Example() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    // 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>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/page.tsx' }}
+  'use client'
+
+  import { useUser } from '@clerk/nextjs'
+
+  export default function Page() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    // 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>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/home.tsx' }}
+  import { useUser } from '@clerk/react-router'
+
+  export default function Home() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    // 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>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useUser } from '@clerk/chrome-extension'
+
+  export default function Example() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    // 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>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/index.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, user, isLoaded } = useUser()
+
+    // 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>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/(user)/index.tsx' }}
+  import { useUser } from '@clerk/clerk-expo'
+  import { Text, View } from 'react-native'
+
+  export default function Page() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    // 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>
+        <Text>Hello {user.firstName}!</Text>
+      </View>
+    )
+  }
+  ```
+</If>
+
+### Update user data
+
+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/Example.tsx' }}
+  import { useUser } from '@clerk/clerk-react'
+
+  export default function Example() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    // 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>
+
+    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 Page() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    // 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>
+
+    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="react-router">
+  ```tsx {{ filename: 'app/routes/home.tsx' }}
+  import { useUser } from '@clerk/react-router'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    // 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>
+
+    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()
+
+    // 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>
+
+    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/index.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()
+
+    // 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>
+
+    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/(user)/index.tsx' }}
+  import { useUser } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity } from 'react-native'
+
+  export default function Page() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    // 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>
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <View>
+        <TouchableOpacity onPress={updateUser}>
+          <Text>Update your name</Text>
+        </TouchableOpacity>
+        <Text>user.firstName: {user.firstName}</Text>
+        <Text>user.lastName: {user.lastName}</Text>
+      </View>
+    )
+  }
+  ```
+</If>
+
+### Reload user data
+
+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/pages/Home.tsx' }}
+  import { useUser } from '@clerk/clerk-react'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    // 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>
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        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 Page() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    // 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>
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        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="react-router">
+  ```tsx {{ filename: 'app/routes/home.tsx' }}
+  import { useUser } from '@clerk/react-router'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    // 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>
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        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()
+
+    // 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>
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        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/index.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()
+
+    // 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>
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        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/(user)/index.tsx' }}
+  import { useUser } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity } from 'react-native'
+
+  export default function Page() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    // 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>
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        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 (
+      <View>
+        <TouchableOpacity onPress={updateUser}>
+          <Text>Update your metadata</Text>
+        </TouchableOpacity>
+        <Text>user role: {user.publicMetadata.role}</Text>
+      </View>
+    )
+  }
+  ```
+</If>