diff --git a/docs/_partials/billing/add-new-payment-method.mdx b/docs/_partials/billing/add-new-payment-method.mdx
index 80e5bde2f6..ca4d52d839 100644
--- a/docs/_partials/billing/add-new-payment-method.mdx
+++ b/docs/_partials/billing/add-new-payment-method.mdx
@@ -3,80 +3,161 @@ 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' }}
+    'use client'
+    import { useUser } from '@clerk/nextjs'
+    import { usePaymentElement, PaymentElement } from '@clerk/nextjs/experimental'
+    import { useState } from 'react'
 
-        // Usually a validation error from stripe that you can ignore.
-        if (error) {
-          setIsSubmitting(false)
+    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
+          }
+
+          // 2. Use the token to add the payment source to the user
+          await user.addPaymentSource(data)
 
-        // 3. Handle success (e.g., show a confirmation, clear the form)
-        alert('Payment method added successfully!')
-      } catch (err: any) {
-        setError(err.message || 'An unexpected error occurred.')
-      } finally {
-        setIsSubmitting(false)
+          // 3. Handle success (e.g., show a confirmation, clear the form)
+          alert('Payment method added successfully!')
+        } catch (err: any) {
+          setError(err.message || 'An unexpected error occurred.')
+        } finally {
+          setIsSubmitting(false)
+        }
       }
+
+      return (
+        <form onSubmit={handleAddPaymentMethod}>
+          <h3>Add a new payment method</h3>
+          <PaymentElement />
+          <button type="submit" disabled={!isFormReady || isSubmitting}>
+            {isSubmitting ? 'Saving...' : 'Save Card'}
+          </button>
+          {error && <p style={{ color: 'red' }}>{error}</p>}
+        </form>
+      )
+    }
+    ```
+  </CodeBlockTabs>
+</If>
+
+<If sdk="react">
+  <CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
+    ```tsx {{ filename: 'src/user/billing/page.tsx' }}
+    import { ClerkLoaded } from '@clerk/clerk-react'
+    import { PaymentElementProvider } from '@clerk/clerk-react/experimental'
+    import { AddPaymentMethodForm } from './AddPaymentMethodForm'
+
+    export default function Page() {
+      return (
+        <div>
+          <h1>Billing Settings</h1>
+
+          <ClerkLoaded>
+            <PaymentElementProvider for="user">
+              <AddPaymentMethodForm />
+            </PaymentElementProvider>
+          </ClerkLoaded>
+        </div>
+      )
     }
+    ```
 
-    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>
+    ```tsx {{ filename: 'src/user/billing/AddPaymentMethodForm.tsx' }}
+    import { useUser } from '@clerk/clerk-react'
+    import { usePaymentElement, PaymentElement } from '@clerk/clerk-react/experimental'
+    import { useState } from 'react'
+
+    export function AddPaymentMethodForm() {
+      const { user } = useUser()
+      const { submit, isFormReady } = usePaymentElement()
+      const [isSubmitting, setIsSubmitting] = useState(false)
+      const [error, setError] = useState<string | null>(null)
+
+      const handleAddPaymentMethod = async (e: React.FormEvent) => {
+        e.preventDefault()
+        if (!isFormReady || !user) {
+          return
+        }
+
+        setError(null)
+        setIsSubmitting(true)
+
+        try {
+          // 1. Submit the form to the payment provider to get a payment token
+          const { data, error } = await submit()
+
+          // Usually a validation error from stripe that you can ignore.
+          if (error) {
+            setIsSubmitting(false)
+            return
+          }
+
+          // 2. Use the token to add the payment source to the user
+          await user.addPaymentSource(data)
+
+          // 3. Handle success (e.g., show a confirmation, clear the form)
+          alert('Payment method added successfully!')
+        } catch (err: any) {
+          setError(err.message || 'An unexpected error occurred.')
+        } finally {
+          setIsSubmitting(false)
+        }
+      }
+
+      return (
+        <form onSubmit={handleAddPaymentMethod}>
+          <h3>Add a new payment method</h3>
+          <PaymentElement />
+          <button type="submit" disabled={!isFormReady || isSubmitting}>
+            {isSubmitting ? 'Saving...' : 'Save Card'}
+          </button>
+          {error && <p style={{ color: 'red' }}>{error}</p>}
+        </form>
+      )
+    }
+    ```
+  </CodeBlockTabs>
+</If>
diff --git a/docs/reference/hooks/use-auth.mdx b/docs/reference/hooks/use-auth.mdx
index c3a88e0313..799838c466 100644
--- a/docs/reference/hooks/use-auth.mdx
+++ b/docs/reference/hooks/use-auth.mdx
@@ -1,7 +1,277 @@
 ---
 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>
+
+## Example
+
+The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
+  import { useAuth } from '@clerk/clerk-react'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/external-data/page.tsx' }}
+  'use client'
+
+  import { useAuth } from '@clerk/nextjs'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useAuth } from '@clerk/react-router'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useAuth } from '@clerk/chrome-extension'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useAuth } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/')({
+    component: ExternalDataPage,
+  })
+
+  function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+{/* <If sdk="astro">
+
+
+  </If> */}
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/external-data/page.tsx' }}
+  import { useAuth } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <View>
+        <Text>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </Text>
+        <TouchableOpacity onPress={fetchExternalData}>
+          <Text>Fetch Data</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+  ```
+</If>
+
+<Typedoc src="clerk-react/use-auth-params" />
+
+<Typedoc src="clerk-react/use-auth-return" />
diff --git a/docs/reference/hooks/use-checkout.mdx b/docs/reference/hooks/use-checkout.mdx
index f6ef42ff76..36a2e8b1fb 100644
--- a/docs/reference/hooks/use-checkout.mdx
+++ b/docs/reference/hooks/use-checkout.mdx
@@ -198,119 +198,237 @@ The `useCheckout()` hook can be used with a context provider for managing state
 
     <Tabs items={["<SubscriptionPage />", "<CheckoutFlow />"]}>
       <Tab>
-        ```tsx {{ filename: 'src/components/SubscriptionPage.tsx', collapsible: true }}
-        import { CheckoutProvider } from '@clerk/nextjs/experimental'
-        import { ClerkLoaded } from '@clerk/nextjs'
-        import { CheckoutFlow } from './CheckoutFlow'
-
-        export function SubscriptionPage() {
-          // `<CheckoutProvider />` sets the context for the checkout flow.
-          // Any child component can now call `useCheckout()` to access this context.
-          return (
-            <CheckoutProvider for="user" planId="cplan_xxx" planPeriod="month">
-              <div>
-                <h1>Upgrade Your Plan</h1>
-                <p>You are about to subscribe to our monthly plan</p>
-                <ClerkLoaded>
-                  <CheckoutFlow />
-                </ClerkLoaded>
-              </div>
-            </CheckoutProvider>
-          )
-        }
-        ```
+        <If sdk="nextjs">
+          ```tsx {{ filename: 'src/components/SubscriptionPage.tsx', collapsible: true }}
+          import { CheckoutProvider } from '@clerk/nextjs/experimental'
+          import { ClerkLoaded } from '@clerk/nextjs'
+          import { CheckoutFlow } from './CheckoutFlow'
+
+          export function SubscriptionPage() {
+            // `<CheckoutProvider />` sets the context for the checkout flow.
+            // Any child component can now call `useCheckout()` to access this context.
+            return (
+              <CheckoutProvider for="user" planId="cplan_xxx" planPeriod="month">
+                <div>
+                  <h1>Upgrade Your Plan</h1>
+                  <p>You are about to subscribe to our monthly plan</p>
+                  <ClerkLoaded>
+                    <CheckoutFlow />
+                  </ClerkLoaded>
+                </div>
+              </CheckoutProvider>
+            )
+          }
+          ```
+        </If>
+
+        <If sdk="react">
+          ```tsx {{ filename: 'src/components/SubscriptionPage.tsx', collapsible: true }}
+          import { CheckoutProvider } from '@clerk/clerk-react/experimental'
+          import { ClerkLoaded } from '@clerk/clerk-react'
+          import { CheckoutFlow } from './CheckoutFlow'
+
+          export function SubscriptionPage() {
+            // `<CheckoutProvider />` sets the context for the checkout flow.
+            // Any child component can now call `useCheckout()` to access this context.
+            return (
+              <CheckoutProvider for="user" planId="cplan_xxx" planPeriod="month">
+                <div>
+                  <h1>Upgrade Your Plan</h1>
+                  <p>You are about to subscribe to our monthly plan</p>
+                  <ClerkLoaded>
+                    <CheckoutFlow />
+                  </ClerkLoaded>
+                </div>
+              </CheckoutProvider>
+            )
+          }
+          ```
+        </If>
       </Tab>
 
       <Tab>
-        ```tsx {{ filename: 'src/components/CheckoutFlow.tsx', collapsible: true }}
-        'use client'
+        <If sdk="nextjs">
+          ```tsx {{ filename: 'src/components/CheckoutFlow.tsx', collapsible: true }}
+          'use client'
 
-        import { useCheckout } from '@clerk/nextjs/experimental'
+          import { useCheckout } from '@clerk/nextjs/experimental'
 
-        export function CheckoutFlow() {
-          const { checkout } = useCheckout()
-          const { status } = checkout
+          export function CheckoutFlow() {
+            const { checkout } = useCheckout()
+            const { status } = checkout
 
-          if (status === 'needs_initialization') {
-            return <CheckoutInitialization />
-          }
+            if (status === 'needs_initialization') {
+              return <CheckoutInitialization />
+            }
 
-          return (
-            <div className="checkout-container">
-              <CheckoutSummary />
-              <PaymentSection />
-            </div>
-          )
-        }
+            return (
+              <div className="checkout-container">
+                <CheckoutSummary />
+                <PaymentSection />
+              </div>
+            )
+          }
 
-        function CheckoutInitialization() {
-          const { checkout } = useCheckout()
-          const { start, fetchStatus } = checkout
+          function CheckoutInitialization() {
+            const { checkout } = useCheckout()
+            const { start, fetchStatus } = checkout
 
-          return (
-            <button onClick={start} disabled={fetchStatus === 'fetching'} className="start-checkout-button">
-              {fetchStatus === 'fetching' ? 'Initializing...' : 'Start Checkout'}
-            </button>
-          )
-        }
+            return (
+              <button onClick={start} disabled={fetchStatus === 'fetching'} className="start-checkout-button">
+                {fetchStatus === 'fetching' ? 'Initializing...' : 'Start Checkout'}
+              </button>
+            )
+          }
 
-        function PaymentSection() {
-          const { checkout } = useCheckout()
-
-          const { isConfirming, confirm, finalize, error } = checkout
-
-          const [isProcessing, setIsProcessing] = useState(false)
-          const [paymentMethodId, setPaymentMethodId] = useState<string | null>(null)
-
-          const submitSelectedMethod = async () => {
-            if (isProcessing || !paymentMethodId) return
-            setIsProcessing(true)
-
-            try {
-              // Confirm checkout with payment method
-              await confirm({
-                paymentSourceId: paymentMethodId,
-              })
-              // Calling `.finalize` enables you to sync the client-side state with the server-side state of your users.
-              // It revalidates all authorization checks computed within server components.
-              finalize({ redirectUrl: '/dashboard' })
-            } catch (error) {
-              console.error('Payment failed:', error)
-            } finally {
-              setIsProcessing(false)
+          function PaymentSection() {
+            const { checkout } = useCheckout()
+
+            const { isConfirming, confirm, finalize, error } = checkout
+
+            const [isProcessing, setIsProcessing] = useState(false)
+            const [paymentMethodId, setPaymentMethodId] = useState<string | null>(null)
+
+            const submitSelectedMethod = async () => {
+              if (isProcessing || !paymentMethodId) return
+              setIsProcessing(true)
+
+              try {
+                // Confirm checkout with payment method
+                await confirm({
+                  paymentSourceId: paymentMethodId,
+                })
+                // Calling `.finalize` enables you to sync the client-side state with the server-side state of your users.
+                // It revalidates all authorization checks computed within server components.
+                finalize({ redirectUrl: '/dashboard' })
+              } catch (error) {
+                console.error('Payment failed:', error)
+              } finally {
+                setIsProcessing(false)
+              }
             }
+
+            return (
+              <>
+                {/* A component that lists a user's payment methods and allows them to select one. See an example: https://clerk.com/docs/reference/hooks/use-payment-methods#examples */}
+                <PaymentMethods onChange={setPaymentMethodId} />
+
+                {error && <div>{error.message}</div>}
+
+                <button type="button" disabled={isProcessing || isConfirming} onClick={submitSelectedMethod}>
+                  {isProcessing || isConfirming ? 'Processing...' : 'Complete Purchase'}
+                </button>
+              </>
+            )
           }
 
-          return (
-            <>
-              {/* A component that lists a user's payment methods and allows them to select one. See an example: https://clerk.com/docs/reference/hooks/use-payment-methods#examples */}
-              <PaymentMethods onChange={setPaymentMethodId} />
+          function CheckoutSummary() {
+            const { checkout } = useCheckout()
+            const { plan, totals } = checkout
+
+            return (
+              <div>
+                <h2>Order Summary</h2>
+                <span>{plan?.name}</span>
+                <span>
+                  {totals?.totalDueNow.currencySymbol}
+                  {totals?.totalDueNow.amountFormatted}
+                </span>
+              </div>
+            )
+          }
+          ```
+        </If>
+
+        <If sdk="react">
+          ```tsx {{ filename: 'src/components/CheckoutFlow.tsx', collapsible: true }}
+          import { useCheckout } from '@clerk/clerk-react/experimental'
+
+          export function CheckoutFlow() {
+            const { checkout } = useCheckout()
+            const { status } = checkout
+
+            if (status === 'needs_initialization') {
+              return <CheckoutInitialization />
+            }
+
+            return (
+              <div className="checkout-container">
+                <CheckoutSummary />
+                <PaymentSection />
+              </div>
+            )
+          }
 
-              {error && <div>{error.message}</div>}
+          function CheckoutInitialization() {
+            const { checkout } = useCheckout()
+            const { start, fetchStatus } = checkout
 
-              <button type="button" disabled={isProcessing || isConfirming} onClick={submitSelectedMethod}>
-                {isProcessing || isConfirming ? 'Processing...' : 'Complete Purchase'}
+            return (
+              <button onClick={start} disabled={fetchStatus === 'fetching'} className="start-checkout-button">
+                {fetchStatus === 'fetching' ? 'Initializing...' : 'Start Checkout'}
               </button>
-            </>
-          )
-        }
+            )
+          }
 
-        function CheckoutSummary() {
-          const { checkout } = useCheckout()
-          const { plan, totals } = checkout
-
-          return (
-            <div>
-              <h2>Order Summary</h2>
-              <span>{plan?.name}</span>
-              <span>
-                {totals?.totalDueNow.currencySymbol}
-                {totals?.totalDueNow.amountFormatted}
-              </span>
-            </div>
-          )
-        }
-        ```
+          function PaymentSection() {
+            const { checkout } = useCheckout()
+
+            const { isConfirming, confirm, finalize, error } = checkout
+
+            const [isProcessing, setIsProcessing] = useState(false)
+            const [paymentMethodId, setPaymentMethodId] = useState<string | null>(null)
+
+            const submitSelectedMethod = async () => {
+              if (isProcessing || !paymentMethodId) return
+              setIsProcessing(true)
+
+              try {
+                // Confirm checkout with payment method
+                await confirm({
+                  paymentSourceId: paymentMethodId,
+                })
+                // Calling `.finalize` enables you to sync the client-side state with the server-side state of your users.
+                // It revalidates all authorization checks computed within server components.
+                finalize({ redirectUrl: '/dashboard' })
+              } catch (error) {
+                console.error('Payment failed:', error)
+              } finally {
+                setIsProcessing(false)
+              }
+            }
+
+            return (
+              <>
+                {/* A component that lists a user's payment methods and allows them to select one. See an example: https://clerk.com/docs/reference/hooks/use-payment-methods#examples */}
+                <PaymentMethods onChange={setPaymentMethodId} />
+
+                {error && <div>{error.message}</div>}
+
+                <button type="button" disabled={isProcessing || isConfirming} onClick={submitSelectedMethod}>
+                  {isProcessing || isConfirming ? 'Processing...' : 'Complete Purchase'}
+                </button>
+              </>
+            )
+          }
+
+          function CheckoutSummary() {
+            const { checkout } = useCheckout()
+            const { plan, totals } = checkout
+
+            return (
+              <div>
+                <h2>Order Summary</h2>
+                <span>{plan?.name}</span>
+                <span>
+                  {totals?.totalDueNow.currencySymbol}
+                  {totals?.totalDueNow.amountFormatted}
+                </span>
+              </div>
+            )
+          }
+          ```
+        </If>
       </Tab>
     </Tabs>
   </Tab>
@@ -320,48 +438,93 @@ The `useCheckout()` hook can be used with a context provider for managing state
 
     The following example shows an `<UpgradeButton />` component that manages its own checkout flow.
 
-    ```tsx {{ filename: 'src/components/UpgradeButton.tsx' }}
-    'use client'
+    <If sdk="nextjs">
+      ```tsx {{ filename: 'src/components/UpgradeButton.tsx' }}
+      'use client'
 
-    import { useCheckout } from '@clerk/nextjs/experimental'
+      import { useCheckout } from '@clerk/nextjs/experimental'
 
-    export function UpgradeButton({
-      planId,
-      planPeriod,
-    }: {
-      planId: string
-      planPeriod: 'month' | 'annual'
-    }) {
-      // Pass options directly to the hook when not using a provider.
-      const { checkout } = useCheckout({
+      export function UpgradeButton({
         planId,
         planPeriod,
-        for: 'user',
-      })
-
-      const { start, status, isStarting, error } = checkout
-
-      const handleStartCheckout = async () => {
-        try {
-          await start()
-          // In a real app, you would now use the `externalClientSecret`
-          // from the checkout object to render a payment form.
-          console.log('Checkout started! Status:', checkout.status)
-        } catch (e) {
-          console.error('Error starting checkout:', e)
+      }: {
+        planId: string
+        planPeriod: 'month' | 'annual'
+      }) {
+        // Pass options directly to the hook when not using a provider.
+        const { checkout } = useCheckout({
+          planId,
+          planPeriod,
+          for: 'user',
+        })
+
+        const { start, status, isStarting, error } = checkout
+
+        const handleStartCheckout = async () => {
+          try {
+            await start()
+            // In a real app, you would now use the `externalClientSecret`
+            // from the checkout object to render a payment form.
+            console.log('Checkout started! Status:', checkout.status)
+          } catch (e) {
+            console.error('Error starting checkout:', e)
+          }
         }
+
+        return (
+          <div>
+            <button onClick={handleStartCheckout} disabled={isStarting}>
+              {isStarting ? 'Initializing...' : `Upgrade to ${planPeriod} plan`}
+            </button>
+            {error && <p style={{ color: 'red' }}>Error: {error.errors[0].message}</p>}
+          </div>
+        )
       }
+      ```
+    </If>
+
+    <If sdk="react">
+      ```tsx {{ filename: 'src/components/UpgradeButton.tsx' }}
+      import { useCheckout } from '@clerk/clerk-react/experimental'
 
-      return (
-        <div>
-          <button onClick={handleStartCheckout} disabled={isStarting}>
-            {isStarting ? 'Initializing...' : `Upgrade to ${planPeriod} plan`}
-          </button>
-          {error && <p style={{ color: 'red' }}>Error: {error.errors[0].message}</p>}
-        </div>
-      )
-    }
-    ```
+      export function UpgradeButton({
+        planId,
+        planPeriod,
+      }: {
+        planId: string
+        planPeriod: 'month' | 'annual'
+      }) {
+        // Pass options directly to the hook when not using a provider.
+        const { checkout } = useCheckout({
+          planId,
+          planPeriod,
+          for: 'user',
+        })
+
+        const { start, status, isStarting, error } = checkout
+
+        const handleStartCheckout = async () => {
+          try {
+            await start()
+            // In a real app, you would now use the `externalClientSecret`
+            // from the checkout object to render a payment form.
+            console.log('Checkout started! Status:', checkout.status)
+          } catch (e) {
+            console.error('Error starting checkout:', e)
+          }
+        }
+
+        return (
+          <div>
+            <button onClick={handleStartCheckout} disabled={isStarting}>
+              {isStarting ? 'Initializing...' : `Upgrade to ${planPeriod} plan`}
+            </button>
+            {error && <p style={{ color: 'red' }}>Error: {error.errors[0].message}</p>}
+          </div>
+        )
+      }
+      ```
+    </If>
   </Tab>
 </Tabs>
 
diff --git a/docs/reference/hooks/use-clerk.mdx b/docs/reference/hooks/use-clerk.mdx
index 26e922f2d2..5221383944 100644
--- a/docs/reference/hooks/use-clerk.mdx
+++ b/docs/reference/hooks/use-clerk.mdx
@@ -1,7 +1,97 @@
 ---
 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.
+
+## Example
+
+The following example uses the `useClerk()` hook to access the `clerk` object. The `clerk` object is used to call the [`openSignIn()`](/docs/reference/javascript/clerk#sign-in) method to open the sign-in modal.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/Home.tsx' }}
+  import { useClerk } from '@clerk/clerk-react'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/home/page.tsx' }}
+  'use client'
+
+  import { useClerk } from '@clerk/nextjs'
+
+  export default function HomePage() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useClerk } from '@clerk/react-router'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useClerk } from '@clerk/chrome-extension'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useClerk } from '@clerk/tanstack-react-start'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useClerk } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity } from 'react-native'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return (
+      <View>
+        <TouchableOpacity onPress={() => clerk.openSignIn({})}>
+          <Text>Sign in</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+  ```
+</If>
+
+<Typedoc src="clerk-react/use-clerk-return" />
diff --git a/docs/reference/hooks/use-payment-attempts.mdx b/docs/reference/hooks/use-payment-attempts.mdx
index 968eb44acc..d9396f8b6e 100644
--- a/docs/reference/hooks/use-payment-attempts.mdx
+++ b/docs/reference/hooks/use-payment-attempts.mdx
@@ -162,137 +162,276 @@ The `usePaymentAttempts()` hook provides access to the payment attempts associat
 
 The following example demonstrates how to fetch and display a user's payment attempts.
 
-```tsx
-import { usePaymentAttempts } from '@clerk/nextjs/experimental'
-
-function PaymentAttemptsList() {
-  const { data, isLoading } = usePaymentAttempts({
-    for: 'user',
-    pageSize: 10,
-  })
+<If sdk="nextjs">
+  ```tsx
+  import { usePaymentAttempts } from '@clerk/nextjs/experimental'
+
+  function PaymentAttemptsList() {
+    const { data, isLoading } = usePaymentAttempts({
+      for: 'user',
+      pageSize: 10,
+    })
+
+    if (isLoading) {
+      return <div>Loading payment attempts...</div>
+    }
 
-  if (isLoading) {
-    return <div>Loading payment attempts...</div>
-  }
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
 
-  if (!data || data.length === 0) {
-    return <div>No payment attempts found.</div>
+    return (
+      <ul>
+        {data?.map((attempt) => (
+          <li key={attempt.id}>
+            Payment #{attempt.id} - {attempt.status}
+            <br />
+            Amount: {attempt.amount.amountFormatted} on {new Date(attempt.updatedAt).toLocaleString()}
+          </li>
+        ))}
+      </ul>
+    )
   }
+  ```
+</If>
 
-  return (
-    <ul>
-      {data?.map((attempt) => (
-        <li key={attempt.id}>
-          Payment #{attempt.id} - {attempt.status}
-          <br />
-          Amount: {attempt.amount.amountFormatted} on {new Date(attempt.updatedAt).toLocaleString()}
-        </li>
-      ))}
-    </ul>
-  )
-}
-```
-
-### Infinite pagination
-
-The following example demonstrates how to implement infinite scrolling with payment attempts.
-
-```tsx
-import { usePaymentAttempts } from '@clerk/nextjs/experimental'
+<If sdk="react">
+  ```tsx
+  import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
 
-function InfinitePaymentAttempts() {
-  const { data, isLoading, hasNextPage, fetchNext } = usePaymentAttempts({
-    for: 'user',
-    infinite: true,
-    pageSize: 20,
-  })
+  function PaymentAttemptsList() {
+    const { data, isLoading } = usePaymentAttempts({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
+    if (isLoading) {
+      return <div>Loading payment attempts...</div>
+    }
 
-  if (!data || data.length === 0) {
-    return <div>No payment attempts found.</div>
-  }
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
 
-  return (
-    <div>
+    return (
       <ul>
         {data?.map((attempt) => (
           <li key={attempt.id}>
-            Payment attempt for {attempt.amount.amountFormatted}
-            <br />
-            Status: {attempt.status}
+            Payment #{attempt.id} - {attempt.status}
             <br />
-            {attempt.status === 'failed' && attempt.failedAt && (
-              <span>Failed At: {new Date(attempt.failedAt).toLocaleString()}</span>
-            )}
+            Amount: {attempt.amount.amountFormatted} on {new Date(attempt.updatedAt).toLocaleString()}
           </li>
         ))}
       </ul>
+    )
+  }
+  ```
+</If>
 
-      {hasNextPage && <button onClick={() => fetchNext()}>Load more payment attempts</button>}
-    </div>
-  )
-}
-```
+### Infinite pagination
 
-### Payment attempts history table
+The following example demonstrates how to implement infinite scrolling with payment attempts.
 
-The following example demonstrates how to use `usePaymentAttempts()` to display a detailed payment history table.
+<If sdk="nextjs">
+  ```tsx
+  import { usePaymentAttempts } from '@clerk/nextjs/experimental'
 
-```tsx
-import { usePaymentAttempts } from '@clerk/nextjs/experimental'
+  function InfinitePaymentAttempts() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePaymentAttempts({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
 
-function PaymentAttemptsHistory() {
-  const { data, isLoading } = usePaymentAttempts({ for: 'user' })
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
 
-  if (isLoading) {
-    return <div>Loading payment attempts...</div>
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
+
+    return (
+      <div>
+        <ul>
+          {data?.map((attempt) => (
+            <li key={attempt.id}>
+              Payment attempt for {attempt.amount.amountFormatted}
+              <br />
+              Status: {attempt.status}
+              <br />
+              {attempt.status === 'failed' && attempt.failedAt && (
+                <span>Failed At: {new Date(attempt.failedAt).toLocaleString()}</span>
+              )}
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more payment attempts</button>}
+      </div>
+    )
   }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx
+  import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
+
+  function InfinitePaymentAttempts() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePaymentAttempts({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
+
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
+
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
 
-  if (!data || data.length === 0) {
-    return <div>No payment attempts found.</div>
+    return (
+      <div>
+        <ul>
+          {data?.map((attempt) => (
+            <li key={attempt.id}>
+              Payment attempt for {attempt.amount.amountFormatted}
+              <br />
+              Status: {attempt.status}
+              <br />
+              {attempt.status === 'failed' && attempt.failedAt && (
+                <span>Failed At: {new Date(attempt.failedAt).toLocaleString()}</span>
+              )}
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more payment attempts</button>}
+      </div>
+    )
   }
+  ```
+</If>
+
+### Payment attempts history table
+
+The following example demonstrates how to use `usePaymentAttempts()` to display a detailed payment history table.
+
+<If sdk="nextjs">
+  ```tsx
+  import { usePaymentAttempts } from '@clerk/nextjs/experimental'
+
+  function PaymentAttemptsHistory() {
+    const { data, isLoading } = usePaymentAttempts({ for: 'user' })
+
+    if (isLoading) {
+      return <div>Loading payment attempts...</div>
+    }
+
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
 
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'paid':
-        return 'green'
-      case 'failed':
-        return 'red'
-      case 'pending':
-        return 'orange'
-      default:
-        return 'gray'
+    const getStatusColor = (status: string) => {
+      switch (status) {
+        case 'paid':
+          return 'green'
+        case 'failed':
+          return 'red'
+        case 'pending':
+          return 'orange'
+        default:
+          return 'gray'
+      }
     }
+
+    return (
+      <table>
+        <thead>
+          <tr>
+            <th>Payment ID</th>
+            <th>Amount</th>
+            <th>Status</th>
+            <th>Date</th>
+            <th>Payment Method</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data?.map((attempt) => (
+            <tr key={attempt.id}>
+              <td>{attempt.id}</td>
+              <td>{attempt.amount.amountFormatted}</td>
+              <td style={{ color: getStatusColor(attempt.status) }}>{attempt.status}</td>
+              <td>{attempt.paidAt ? new Date(attempt.paidAt).toLocaleDateString() : '-'}</td>
+              <td>
+                {attempt.paymentSource.cardType} ****{attempt.paymentSource.last4}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    )
   }
+  ```
+</If>
 
-  return (
-    <table>
-      <thead>
-        <tr>
-          <th>Payment ID</th>
-          <th>Amount</th>
-          <th>Status</th>
-          <th>Date</th>
-          <th>Payment Method</th>
-        </tr>
-      </thead>
-      <tbody>
-        {data?.map((attempt) => (
-          <tr key={attempt.id}>
-            <td>{attempt.id}</td>
-            <td>{attempt.amount.amountFormatted}</td>
-            <td style={{ color: getStatusColor(attempt.status) }}>{attempt.status}</td>
-            <td>{attempt.paidAt ? new Date(attempt.paidAt).toLocaleDateString() : '-'}</td>
-            <td>
-              {attempt.paymentSource.cardType} ****{attempt.paymentSource.last4}
-            </td>
+<If sdk="react">
+  ```tsx
+  import { usePaymentAttempts } from '@clerk/clerk-react/experimental'
+
+  function PaymentAttemptsHistory() {
+    const { data, isLoading } = usePaymentAttempts({ for: 'user' })
+
+    if (isLoading) {
+      return <div>Loading payment attempts...</div>
+    }
+
+    if (!data || data.length === 0) {
+      return <div>No payment attempts found.</div>
+    }
+
+    const getStatusColor = (status: string) => {
+      switch (status) {
+        case 'paid':
+          return 'green'
+        case 'failed':
+          return 'red'
+        case 'pending':
+          return 'orange'
+        default:
+          return 'gray'
+      }
+    }
+
+    return (
+      <table>
+        <thead>
+          <tr>
+            <th>Payment ID</th>
+            <th>Amount</th>
+            <th>Status</th>
+            <th>Date</th>
+            <th>Payment Method</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}
-```
+        </thead>
+        <tbody>
+          {data?.map((attempt) => (
+            <tr key={attempt.id}>
+              <td>{attempt.id}</td>
+              <td>{attempt.amount.amountFormatted}</td>
+              <td style={{ color: getStatusColor(attempt.status) }}>{attempt.status}</td>
+              <td>{attempt.paidAt ? new Date(attempt.paidAt).toLocaleDateString() : '-'}</td>
+              <td>
+                {attempt.paymentSource.cardType} ****{attempt.paymentSource.last4}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    )
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-payment-methods.mdx b/docs/reference/hooks/use-payment-methods.mdx
index f93745bcdf..65acb72c1e 100644
--- a/docs/reference/hooks/use-payment-methods.mdx
+++ b/docs/reference/hooks/use-payment-methods.mdx
@@ -120,122 +120,243 @@ The `usePaymentMethods()` hook provides access to the payment methods associated
 
 The following example demonstrates how to fetch and display a user's payment methods.
 
-```tsx
-import { usePaymentMethods } from '@clerk/nextjs/experimental'
+<If sdk="nextjs">
+  ```tsx
+  import { usePaymentMethods } from '@clerk/nextjs/experimental'
+
+  function PaymentMethodsList() {
+    const { data, isLoading } = usePaymentMethods({
+      for: 'user',
+      pageSize: 10,
+    })
+
+    if (isLoading) {
+      return <div>Loading payment methods...</div>
+    }
 
-function PaymentMethodsList() {
-  const { data, isLoading } = usePaymentMethods({
-    for: 'user',
-    pageSize: 10,
-  })
+    if (!data || data.length === 0) {
+      // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/add-new-payment-method
+      return <div>No payment methods found. Please add a payment method to your account.</div>
+    }
 
-  if (isLoading) {
-    return <div>Loading payment methods...</div>
+    return (
+      <ul>
+        {data?.map((method) => (
+          <li key={method.id}>
+            {method.cardType} **** {method.last4}
+            {method.isDefault ? ' (Default)' : null}
+          </li>
+        ))}
+      </ul>
+    )
   }
+  ```
+</If>
 
-  if (!data || data.length === 0) {
-    // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/add-new-payment-method
-    return <div>No payment methods found. Please add a payment method to your account.</div>
-  }
+<If sdk="react">
+  ```tsx
+  import { usePaymentMethods } from '@clerk/clerk-react/experimental'
+
+  function PaymentMethodsList() {
+    const { data, isLoading } = usePaymentMethods({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  return (
-    <ul>
-      {data?.map((method) => (
-        <li key={method.id}>
-          {method.cardType} **** {method.last4}
-          {method.isDefault ? ' (Default)' : null}
-        </li>
-      ))}
-    </ul>
-  )
-}
-```
+    if (isLoading) {
+      return <div>Loading payment methods...</div>
+    }
+
+    if (!data || data.length === 0) {
+      // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/add-new-payment-method
+      return <div>No payment methods found. Please add a payment method to your account.</div>
+    }
+
+    return (
+      <ul>
+        {data?.map((method) => (
+          <li key={method.id}>
+            {method.cardType} **** {method.last4}
+            {method.isDefault ? ' (Default)' : null}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+  ```
+</If>
 
 ### Infinite pagination
 
 The following example demonstrates how to implement infinite scrolling with payment methods.
 
-```tsx
-import { usePaymentMethods } from '@clerk/nextjs/experimental'
+<If sdk="nextjs">
+  ```tsx
+  import { usePaymentMethods } from '@clerk/nextjs/experimental'
 
-function InfinitePaymentMethods() {
-  const { data, isLoading, hasNextPage, fetchNext } = usePaymentMethods({
-    for: 'user',
-    infinite: true,
-    pageSize: 20,
-  })
+  function InfinitePaymentMethods() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePaymentMethods({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
 
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
+
+    if (!data || data.length === 0) {
+      // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/add-new-payment-method
+      return <div>No payment methods found. Please add a payment method to your account.</div>
+    }
 
-  if (!data || data.length === 0) {
-    // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/add-new-payment-method
-    return <div>No payment methods found. Please add a payment method to your account.</div>
+    return (
+      <div>
+        <ul>
+          {data?.map((method) => (
+            <li key={method.id}>
+              {method.cardType} ending in {method.last4}
+              {method.status === 'expired' ? ' (Expired)' : null}
+              {method.status === 'disconnected' ? ' (Disconnected)' : null}
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more payment methods</button>}
+      </div>
+    )
   }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx
+  import { usePaymentMethods } from '@clerk/clerk-react/experimental'
+
+  function InfinitePaymentMethods() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePaymentMethods({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
+
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
 
-  return (
-    <div>
-      <ul>
-        {data?.map((method) => (
-          <li key={method.id}>
-            {method.cardType} ending in {method.last4}
-            {method.status === 'expired' ? ' (Expired)' : null}
-            {method.status === 'disconnected' ? ' (Disconnected)' : null}
-          </li>
-        ))}
-      </ul>
+    if (!data || data.length === 0) {
+      // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/add-new-payment-method
+      return <div>No payment methods found. Please add a payment method to your account.</div>
+    }
 
-      {hasNextPage && <button onClick={() => fetchNext()}>Load more payment methods</button>}
-    </div>
-  )
-}
-```
+    return (
+      <div>
+        <ul>
+          {data?.map((method) => (
+            <li key={method.id}>
+              {method.cardType} ending in {method.last4}
+              {method.status === 'expired' ? ' (Expired)' : null}
+              {method.status === 'disconnected' ? ' (Disconnected)' : null}
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more payment methods</button>}
+      </div>
+    )
+  }
+  ```
+</If>
 
 ### With checkout flow
 
 The following example demonstrates how to use `usePaymentMethods()` in a checkout flow to select an existing payment method. For more information on how to build a checkout flow with an existing payment method, see [Build a custom checkout flow](/docs/guides/development/custom-flows/billing/checkout-new-payment-method).
 
-```tsx
-import { usePaymentMethods, useCheckout } from '@clerk/nextjs/experimental'
-
-function CheckoutPaymentSelection() {
-  const { data, isLoading } = usePaymentMethods({ for: 'user' })
-  const { checkout } = useCheckout()
-  const { confirm, finalize } = checkout
-
-  const handlePaymentSubmit = async (paymentMethodId: string) => {
-    try {
-      // Confirm checkout with selected payment method
-      await confirm({ paymentSourceId: paymentMethodId })
-      // Complete checkout and redirect
-      finalize({ redirectUrl: '/dashboard' })
-    } catch (error) {
-      console.error('Payment failed:', error)
+<If sdk="nextjs">
+  ```tsx
+  import { usePaymentMethods, useCheckout } from '@clerk/nextjs/experimental'
+
+  function CheckoutPaymentSelection() {
+    const { data, isLoading } = usePaymentMethods({ for: 'user' })
+    const { checkout } = useCheckout()
+    const { confirm, finalize } = checkout
+
+    const handlePaymentSubmit = async (paymentMethodId: string) => {
+      try {
+        // Confirm checkout with selected payment method
+        await confirm({ paymentSourceId: paymentMethodId })
+        // Complete checkout and redirect
+        finalize({ redirectUrl: '/dashboard' })
+      } catch (error) {
+        console.error('Payment failed:', error)
+      }
     }
-  }
 
-  if (isLoading) {
-    return <div>Loading payment methods...</div>
-  }
+    if (isLoading) {
+      return <div>Loading payment methods...</div>
+    }
 
-  if (!data || data.length === 0) {
-    // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/checkout-new-payment-method
-    return <div>No payment methods found. Please add a payment method to your account.</div>
+    if (!data || data.length === 0) {
+      // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/checkout-new-payment-method
+      return <div>No payment methods found. Please add a payment method to your account.</div>
+    }
+
+    return (
+      <div>
+        <h3>Select a payment method</h3>
+        {data?.map((method) => (
+          <button key={method.id} onClick={() => handlePaymentSubmit(method.id)}>
+            Pay with {method.cardType} ending in {method.last4}
+          </button>
+        ))}
+      </div>
+    )
   }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx
+  import { usePaymentMethods, useCheckout } from '@clerk/clerk-react/experimental'
+
+  function CheckoutPaymentSelection() {
+    const { data, isLoading } = usePaymentMethods({ for: 'user' })
+    const { checkout } = useCheckout()
+    const { confirm, finalize } = checkout
+
+    const handlePaymentSubmit = async (paymentMethodId: string) => {
+      try {
+        // Confirm checkout with selected payment method
+        await confirm({ paymentSourceId: paymentMethodId })
+        // Complete checkout and redirect
+        finalize({ redirectUrl: '/dashboard' })
+      } catch (error) {
+        console.error('Payment failed:', error)
+      }
+    }
+
+    if (isLoading) {
+      return <div>Loading payment methods...</div>
+    }
+
+    if (!data || data.length === 0) {
+      // Code for how to add a new payment method: https://clerk.com/docs/guides/development/custom-flows/billing/checkout-new-payment-method
+      return <div>No payment methods found. Please add a payment method to your account.</div>
+    }
 
-  return (
-    <div>
-      <h3>Select a payment method</h3>
-      {data?.map((method) => (
-        <button key={method.id} onClick={() => handlePaymentSubmit(method.id)}>
-          Pay with {method.cardType} ending in {method.last4}
-        </button>
-      ))}
-    </div>
-  )
-}
-```
+    return (
+      <div>
+        <h3>Select a payment method</h3>
+        {data?.map((method) => (
+          <button key={method.id} onClick={() => handlePaymentSubmit(method.id)}>
+            Pay with {method.cardType} ending in {method.last4}
+          </button>
+        ))}
+      </div>
+    )
+  }
+  ```
+</If>
 
 ## Related guides
 
diff --git a/docs/reference/hooks/use-plans.mdx b/docs/reference/hooks/use-plans.mdx
index 80b2ae763e..07bc894fb2 100644
--- a/docs/reference/hooks/use-plans.mdx
+++ b/docs/reference/hooks/use-plans.mdx
@@ -120,71 +120,67 @@ The `usePlans()` hook provides access to the subscription plans available in you
 
 The following example shows how to fetch and display available plans.
 
-```tsx
-'use client'
-import { usePlans } from '@clerk/nextjs/experimental'
-
-function PlansList() {
-  const { data, isLoading, hasNextPage, fetchNext, hasPreviousPage, fetchPrevious } = usePlans({
-    for: 'user',
-    pageSize: 10,
-  })
-
-  if (isLoading) {
-    return <div>Loading plans...</div>
-  }
-
-  return (
-    <ul>
-      {data?.map((plan) => (
-        <li key={plan.id}>
-          <h3>{plan.name}</h3>
-          <p>{plan.description}</p>
-          <p>Is free plan: {!plan.hasBaseFee ? 'Yes' : 'No'}</p>
-          <p>
-            Price per month: {plan.currency} {plan.amountFormatted}
-          </p>
-          <p>
-            Price per year: {plan.currency} {plan.annualAmountFormatted} equivalent to{' '}
-            {plan.currency} {plan.annualMonthlyAmountFormatted} per month
-          </p>
-          <h4>Features:</h4>
-          <ul>
-            {plan.features.map((feature) => (
-              <li key={feature.id}>{feature.name}</li>
-            ))}
-          </ul>
-        </li>
-      ))}
-
-      {hasNextPage && <button onClick={() => fetchNext()}>Next</button>}
-      {hasPreviousPage && <button onClick={() => fetchPrevious()}>Previous</button>}
-    </ul>
-  )
-}
-```
-
-### Infinite pagination
+<If sdk="nextjs">
+  ```tsx
+  'use client'
+  import { usePlans } from '@clerk/nextjs/experimental'
+
+  function PlansList() {
+    const { data, isLoading, hasNextPage, fetchNext, hasPreviousPage, fetchPrevious } = usePlans({
+      for: 'user',
+      pageSize: 10,
+    })
+
+    if (isLoading) {
+      return <div>Loading plans...</div>
+    }
+
+    return (
+      <ul>
+        {data?.map((plan) => (
+          <li key={plan.id}>
+            <h3>{plan.name}</h3>
+            <p>{plan.description}</p>
+            <p>Is free plan: {!plan.hasBaseFee ? 'Yes' : 'No'}</p>
+            <p>
+              Price per month: {plan.currency} {plan.amountFormatted}
+            </p>
+            <p>
+              Price per year: {plan.currency} {plan.annualAmountFormatted} equivalent to{' '}
+              {plan.currency} {plan.annualMonthlyAmountFormatted} per month
+            </p>
+            <h4>Features:</h4>
+            <ul>
+              {plan.features.map((feature) => (
+                <li key={feature.id}>{feature.name}</li>
+              ))}
+            </ul>
+          </li>
+        ))}
 
-The following example demonstrates how to implement infinite scrolling with plans.
+        {hasNextPage && <button onClick={() => fetchNext()}>Next</button>}
+        {hasPreviousPage && <button onClick={() => fetchPrevious()}>Previous</button>}
+      </ul>
+    )
+  }
+  ```
+</If>
 
-```tsx
-'use client'
-import { usePlans } from '@clerk/nextjs/experimental'
+<If sdk="react">
+  ```tsx
+  import { usePlans } from '@clerk/clerk-react/experimental'
 
-function InfinitePlansList() {
-  const { data, isLoading, hasNextPage, fetchNext } = usePlans({
-    for: 'user',
-    infinite: true,
-    pageSize: 2,
-  })
+  function PlansList() {
+    const { data, isLoading, hasNextPage, fetchNext, hasPreviousPage, fetchPrevious } = usePlans({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  if (isLoading) {
-    return <div>Loading plans...</div>
-  }
+    if (isLoading) {
+      return <div>Loading plans...</div>
+    }
 
-  return (
-    <div>
+    return (
       <ul>
         {data?.map((plan) => (
           <li key={plan.id}>
@@ -206,10 +202,110 @@ function InfinitePlansList() {
             </ul>
           </li>
         ))}
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Next</button>}
+        {hasPreviousPage && <button onClick={() => fetchPrevious()}>Previous</button>}
       </ul>
+    )
+  }
+  ```
+</If>
+
+### Infinite pagination
 
-      {hasNextPage && <button onClick={() => fetchNext()}>Load more plans</button>}
-    </div>
-  )
-}
-```
+The following example demonstrates how to implement infinite scrolling with plans.
+
+<If sdk="nextjs">
+  ```tsx
+  'use client'
+  import { usePlans } from '@clerk/nextjs/experimental'
+
+  function InfinitePlansList() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePlans({
+      for: 'user',
+      infinite: true,
+      pageSize: 2,
+    })
+
+    if (isLoading) {
+      return <div>Loading plans...</div>
+    }
+
+    return (
+      <div>
+        <ul>
+          {data?.map((plan) => (
+            <li key={plan.id}>
+              <h3>{plan.name}</h3>
+              <p>{plan.description}</p>
+              <p>Is free plan: {!plan.hasBaseFee ? 'Yes' : 'No'}</p>
+              <p>
+                Price per month: {plan.currency} {plan.amountFormatted}
+              </p>
+              <p>
+                Price per year: {plan.currency} {plan.annualAmountFormatted} equivalent to{' '}
+                {plan.currency} {plan.annualMonthlyAmountFormatted} per month
+              </p>
+              <h4>Features:</h4>
+              <ul>
+                {plan.features.map((feature) => (
+                  <li key={feature.id}>{feature.name}</li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more plans</button>}
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx
+  import { usePlans } from '@clerk/clerk-react/experimental'
+
+  function InfinitePlansList() {
+    const { data, isLoading, hasNextPage, fetchNext } = usePlans({
+      for: 'user',
+      infinite: true,
+      pageSize: 2,
+    })
+
+    if (isLoading) {
+      return <div>Loading plans...</div>
+    }
+
+    return (
+      <div>
+        <ul>
+          {data?.map((plan) => (
+            <li key={plan.id}>
+              <h3>{plan.name}</h3>
+              <p>{plan.description}</p>
+              <p>Is free plan: {!plan.hasBaseFee ? 'Yes' : 'No'}</p>
+              <p>
+                Price per month: {plan.currency} {plan.amountFormatted}
+              </p>
+              <p>
+                Price per year: {plan.currency} {plan.annualAmountFormatted} equivalent to{' '}
+                {plan.currency} {plan.annualMonthlyAmountFormatted} per month
+              </p>
+              <h4>Features:</h4>
+              <ul>
+                {plan.features.map((feature) => (
+                  <li key={feature.id}>{feature.name}</li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more plans</button>}
+      </div>
+    )
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-session-list.mdx b/docs/reference/hooks/use-session-list.mdx
index 5cc504fb2f..a2da5c5ecd 100644
--- a/docs/reference/hooks/use-session-list.mdx
+++ b/docs/reference/hooks/use-session-list.mdx
@@ -1,7 +1,144 @@
 ---
 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.
+
+## 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()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/home/page.tsx' }}
+  'use client'
+
+  import { useSessionList } from '@clerk/nextjs'
+
+  export default function HomePage() {
+    const { isLoaded, sessions } = useSessionList()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSessionList } from '@clerk/react-router'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useSessionList } from '@clerk/chrome-extension'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSessionList } from '@clerk/tanstack-react-start'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <div>
+        <p>Welcome back. You've been here {sessions.length} times before.</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSessionList } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function Home() {
+    const { isLoaded, sessions } = useSessionList()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return (
+      <View>
+        <Text>Welcome back. You've been here {sessions.length} times before.</Text>
+      </View>
+    )
+  }
+  ```
+</If>
+
+<Typedoc src="clerk-react/use-session-list-return" />
diff --git a/docs/reference/hooks/use-session.mdx b/docs/reference/hooks/use-session.mdx
index 93af5b99cc..dc128f4a0a 100644
--- a/docs/reference/hooks/use-session.mdx
+++ b/docs/reference/hooks/use-session.mdx
@@ -1,7 +1,173 @@
 ---
 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.
+
+## 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()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
+
+    return (
+      <div>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/home/page.tsx' }}
+  'use client'
+
+  import { useSession } from '@clerk/nextjs'
+
+  export default function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
+
+    return (
+      <div>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSession } from '@clerk/react-router'
+
+  export default function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
+
+    return (
+      <div>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useSession } from '@clerk/chrome-extension'
+
+  export default function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
+
+    return (
+      <div>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSession } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/')({
+    component: HomePage,
+  })
+
+  function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
+
+    return (
+      <div>
+        <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSession } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export function HomePage() {
+    const { isLoaded, session, isSignedIn } = useSession()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+    if (!isSignedIn) {
+      // Handle signed out state
+      return null
+    }
+
+    return (
+      <View>
+        <Text>This session has been active since {session.lastActiveAt.toLocaleString()}</Text>
+      </View>
+    )
+  }
+  ```
+</If>
+
+<Typedoc src="clerk-react/use-session-return" />
diff --git a/docs/reference/hooks/use-sign-in.mdx b/docs/reference/hooks/use-sign-in.mdx
index bddec03f46..1108833536 100644
--- a/docs/reference/hooks/use-sign-in.mdx
+++ b/docs/reference/hooks/use-sign-in.mdx
@@ -1,7 +1,124 @@
 ---
 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).
+
+## Examples
+
+### Check the current state of a sign-in
+
+The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs/reference/javascript/sign-in) object, which contains the current sign-in attempt status and methods to create a new sign-in attempt. The `isLoaded` property is used to handle the loading state.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/SignInPage.tsx' }}
+  import { useSignIn } from '@clerk/clerk-react'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/sign-in/page.tsx' }}
+  'use client'
+
+  import { useSignIn } from '@clerk/nextjs'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignIn } from '@clerk/react-router'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useSignIn } from '@clerk/chrome-extension'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignIn } from '@clerk/tanstack-react-start'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignIn } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <View>The current sign-in attempt status is {signIn?.status}.</View>
+  }
+  ```
+</If>
+
+### Create a custom sign-in flow with `useSignIn()`
+
+The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).
+
+<Typedoc src="clerk-react/use-sign-in-return" />
diff --git a/docs/reference/hooks/use-sign-up.mdx b/docs/reference/hooks/use-sign-up.mdx
index e9d38edece..911147d4dc 100644
--- a/docs/reference/hooks/use-sign-up.mdx
+++ b/docs/reference/hooks/use-sign-up.mdx
@@ -1,7 +1,124 @@
 ---
 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).
+
+## Examples
+
+### Check the current state of a sign-up
+
+The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs/reference/javascript/sign-up) object, which contains the current sign-up attempt status and methods to create a new sign-up attempt. The `isLoaded` property is used to handle the loading state.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/SignUpPage.tsx' }}
+  import { useSignUp } from '@clerk/clerk-react'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/sign-up/page.tsx' }}
+  'use client'
+
+  import { useSignUp } from '@clerk/nextjs'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignUp } from '@clerk/react-router'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useSignUp } from '@clerk/chrome-extension'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignUp } from '@clerk/tanstack-react-start'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <div>The current sign-up attempt status is {signUp?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useSignUp } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function SignUpPage() {
+    const { isLoaded, signUp } = useSignUp()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    return <View>The current sign-up attempt status is {signUp?.status}.</View>
+  }
+  ```
+</If>
+
+### Create a custom sign-up flow with `useSignUp()`
+
+The `useSignUp()` hook can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignUp()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).
+
+<Typedoc src="clerk-react/use-sign-up-return" />
diff --git a/docs/reference/hooks/use-statements.mdx b/docs/reference/hooks/use-statements.mdx
index 679f736a4c..c4062232c2 100644
--- a/docs/reference/hooks/use-statements.mdx
+++ b/docs/reference/hooks/use-statements.mdx
@@ -162,75 +162,152 @@ The `useStatements()` hook provides access to the statements associated with a u
 
 The following example demonstrates how to fetch and display a user's statements.
 
-```tsx
-import { useStatements } from '@clerk/nextjs/experimental'
+<If sdk="nextjs">
+  ```tsx
+  import { useStatements } from '@clerk/nextjs/experimental'
 
-function StatementsList() {
-  const { data, isLoading } = useStatements({
-    for: 'user',
-    pageSize: 10,
-  })
+  function StatementsList() {
+    const { data, isLoading } = useStatements({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  if (isLoading) {
-    return <div>Loading statements...</div>
-  }
-
-  if (!data || data.length === 0) {
-    return <div>No statements found.</div>
-  }
+    if (isLoading) {
+      return <div>Loading statements...</div>
+    }
 
-  return (
-    <ul>
-      {data?.map((statement) => (
-        <li key={statement.id}>
-          Statement ID: {statement.id} - {statement.status}
-          <br />
-          Date: {statement.timestamp.toLocaleDateString()}
-        </li>
-      ))}
-    </ul>
-  )
-}
-```
+    if (!data || data.length === 0) {
+      return <div>No statements found.</div>
+    }
 
-### Infinite pagination
-
-The following example demonstrates how to implement infinite scrolling with statements.
+    return (
+      <ul>
+        {data?.map((statement) => (
+          <li key={statement.id}>
+            Statement ID: {statement.id} - {statement.status}
+            <br />
+            Date: {statement.timestamp.toLocaleDateString()}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+  ```
+</If>
 
-```tsx
-import { useStatements } from '@clerk/nextjs/experimental'
+<If sdk="react">
+  ```tsx
+  import { useStatements } from '@clerk/clerk-react/experimental'
 
-function InfiniteStatements() {
-  const { data, isLoading, hasNextPage, fetchNext } = useStatements({
-    for: 'user',
-    infinite: true,
-    pageSize: 20,
-  })
+  function StatementsList() {
+    const { data, isLoading } = useStatements({
+      for: 'user',
+      pageSize: 10,
+    })
 
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
+    if (isLoading) {
+      return <div>Loading statements...</div>
+    }
 
-  if (!data || data.length === 0) {
-    return <div>No statements found.</div>
-  }
+    if (!data || data.length === 0) {
+      return <div>No statements found.</div>
+    }
 
-  return (
-    <div>
+    return (
       <ul>
         {data?.map((statement) => (
           <li key={statement.id}>
-            Statement ID: {statement.id}
-            <br />
-            Amount: {statement.totals.grandTotal.amountFormatted}
+            Statement ID: {statement.id} - {statement.status}
             <br />
-            Status: {statement.status}
+            Date: {statement.timestamp.toLocaleDateString()}
           </li>
         ))}
       </ul>
+    )
+  }
+  ```
+</If>
 
-      {hasNextPage && <button onClick={() => fetchNext()}>Load more statements</button>}
-    </div>
-  )
-}
-```
+### Infinite pagination
+
+The following example demonstrates how to implement infinite scrolling with statements.
+
+<If sdk="nextjs">
+  ```tsx
+  import { useStatements } from '@clerk/nextjs/experimental'
+
+  function InfiniteStatements() {
+    const { data, isLoading, hasNextPage, fetchNext } = useStatements({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
+
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
+
+    if (!data || data.length === 0) {
+      return <div>No statements found.</div>
+    }
+
+    return (
+      <div>
+        <ul>
+          {data?.map((statement) => (
+            <li key={statement.id}>
+              Statement ID: {statement.id}
+              <br />
+              Amount: {statement.totals.grandTotal.amountFormatted}
+              <br />
+              Status: {statement.status}
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more statements</button>}
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx
+  import { useStatements } from '@clerk/clerk-react/experimental'
+
+  function InfiniteStatements() {
+    const { data, isLoading, hasNextPage, fetchNext } = useStatements({
+      for: 'user',
+      infinite: true,
+      pageSize: 20,
+    })
+
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
+
+    if (!data || data.length === 0) {
+      return <div>No statements found.</div>
+    }
+
+    return (
+      <div>
+        <ul>
+          {data?.map((statement) => (
+            <li key={statement.id}>
+              Statement ID: {statement.id}
+              <br />
+              Amount: {statement.totals.grandTotal.amountFormatted}
+              <br />
+              Status: {statement.status}
+            </li>
+          ))}
+        </ul>
+
+        {hasNextPage && <button onClick={() => fetchNext()}>Load more statements</button>}
+      </div>
+    )
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-subscription.mdx b/docs/reference/hooks/use-subscription.mdx
index fef72ab651..9aed0e5c73 100644
--- a/docs/reference/hooks/use-subscription.mdx
+++ b/docs/reference/hooks/use-subscription.mdx
@@ -74,144 +74,366 @@ The `useSubscription()` hook provides access to subscription information for use
 
 The following example shows how to fetch and display subscription information.
 
-```tsx
-'use client'
-import { useSubscription } from '@clerk/nextjs/experimental'
+<If sdk="nextjs">
+  ```tsx
+  'use client'
+  import { useSubscription } from '@clerk/nextjs/experimental'
 
-function SubscriptionInfo() {
-  const { data, isLoading, error } = useSubscription()
+  function SubscriptionInfo() {
+    const { data, isLoading, error } = useSubscription()
 
-  if (isLoading) {
-    return <div>Loading subscription...</div>
-  }
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
 
-  if (error) {
-    return <div>Error loading subscription: {error.message}</div>
-  }
+    if (error) {
+      return <div>Error loading subscription: {error.message}</div>
+    }
+
+    if (!data) {
+      return <div>No subscription found</div>
+    }
 
-  if (!data) {
-    return <div>No subscription found</div>
+    return (
+      <div>
+        <h2>Your Subscription</h2>
+        {/* Display subscription details */}
+      </div>
+    )
   }
+  ```
+</If>
 
-  return (
-    <div>
-      <h2>Your Subscription</h2>
-      {/* Display subscription details */}
-    </div>
-  )
-}
-```
+<If sdk="react">
+  ```tsx
+  import { useSubscription } from '@clerk/clerk-react/experimental'
+
+  function SubscriptionInfo() {
+    const { data, isLoading, error } = useSubscription()
+
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
+
+    if (error) {
+      return <div>Error loading subscription: {error.message}</div>
+    }
+
+    if (!data) {
+      return <div>No subscription found</div>
+    }
+
+    return (
+      <div>
+        <h2>Your Subscription</h2>
+        {/* Display subscription details */}
+      </div>
+    )
+  }
+  ```
+</If>
 
 ### Organization subscription
 
 The following example shows how to fetch an organization's subscription.
 
-```tsx
-'use client'
-import { useSubscription } from '@clerk/nextjs/experimental'
+<If sdk="nextjs">
+  ```tsx
+  'use client'
+  import { useSubscription } from '@clerk/nextjs/experimental'
 
-function OrganizationSubscription() {
-  const { data, isLoading, revalidate } = useSubscription({
-    for: 'organization',
-    keepPreviousData: true,
-  })
+  function OrganizationSubscription() {
+    const { data, isLoading, revalidate } = useSubscription({
+      for: 'organization',
+      keepPreviousData: true,
+    })
 
-  const handleSubscriptionUpdate = async () => {
-    // After making changes to the subscription
-    await revalidate()
-  }
+    const handleSubscriptionUpdate = async () => {
+      // After making changes to the subscription
+      await revalidate()
+    }
 
-  if (isLoading) {
-    return <div>Loading organization subscription...</div>
+    if (isLoading) {
+      return <div>Loading organization subscription...</div>
+    }
+
+    return (
+      <div>
+        <h2>Organization Subscription</h2>
+        {/* Display organization subscription details */}
+        <button onClick={handleSubscriptionUpdate}>Refresh Subscription</button>
+      </div>
+    )
   }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx
+  import { useSubscription } from '@clerk/clerk-react/experimental'
 
-  return (
-    <div>
-      <h2>Organization Subscription</h2>
-      {/* Display organization subscription details */}
-      <button onClick={handleSubscriptionUpdate}>Refresh Subscription</button>
-    </div>
-  )
-}
-```
+  function OrganizationSubscription() {
+    const { data, isLoading, revalidate } = useSubscription({
+      for: 'organization',
+      keepPreviousData: true,
+    })
+
+    const handleSubscriptionUpdate = async () => {
+      // After making changes to the subscription
+      await revalidate()
+    }
+
+    if (isLoading) {
+      return <div>Loading organization subscription...</div>
+    }
+
+    return (
+      <div>
+        <h2>Organization Subscription</h2>
+        {/* Display organization subscription details */}
+        <button onClick={handleSubscriptionUpdate}>Refresh Subscription</button>
+      </div>
+    )
+  }
+  ```
+</If>
 
 ### With error handling
 
 The following example shows how to handle subscription data with proper error states.
 
-```tsx {{ filename: 'app/pricing/subscription-details/page.tsx' }}
-'use client'
-import { useSubscription } from '@clerk/nextjs/experimental'
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/pricing/subscription-details/page.tsx' }}
+  'use client'
+  import { useSubscription } from '@clerk/nextjs/experimental'
 
-function SubscriptionDetails() {
-  const { data: subscription, isLoading } = useSubscription()
+  function SubscriptionDetails() {
+    const { data: subscription, isLoading } = useSubscription()
 
-  if (isLoading) {
-    return <div>Loading subscription...</div>
-  }
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
+
+    if (!subscription) {
+      return <div>No subscription</div>
+    }
 
-  if (!subscription) {
-    return <div>No subscription</div>
+    return (
+      <div className="subscription-details">
+        <h2>Subscription Details</h2>
+        <div className="status">
+          Status: <span className={`status-${subscription.status}`}>{subscription.status}</span>
+        </div>
+
+        <div className="dates">
+          <p>Active since: {subscription.activeAt.toLocaleDateString()}</p>
+          {subscription.pastDueAt && (
+            <p className="warning">Past due since: {subscription.pastDueAt.toLocaleDateString()}</p>
+          )}
+        </div>
+
+        {subscription.nextPayment && (
+          <div className="next-payment">
+            <h3>Next Payment</h3>
+            <p>Amount: {subscription.nextPayment.amount.amountFormatted}</p>
+            <p>Due: {subscription.nextPayment.date.toLocaleDateString()}</p>
+          </div>
+        )}
+
+        <div className="subscription-items">
+          <h3>Subscription Items</h3>
+          <ul>
+            {subscription.subscriptionItems.map((item) => (
+              <li key={item.id}>{/* Display subscription item details */}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    )
   }
 
-  return (
-    <div className="subscription-details">
-      <h2>Subscription Details</h2>
-      <div className="status">
-        Status: <span className={`status-${subscription.status}`}>{subscription.status}</span>
+  export default function Page() {
+    const { data, isLoading, error, isFetching, revalidate } = useSubscription()
+
+    if (error) {
+      return (
+        <div className="error-state">
+          <h3>Failed to load subscription</h3>
+          <p>{error.message}</p>
+          <button onClick={revalidate}>Try Again</button>
+        </div>
+      )
+    }
+
+    return (
+      <div className="subscription-status">
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <>
+            <div className="status-indicator">{isFetching && <span>Refreshing...</span>}</div>
+            {data ? <SubscriptionDetails /> : <div>No active subscription</div>}
+          </>
+        )}
       </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/pricing/subscription-details/page.tsx' }}
+  'use client'
+  import { useSubscription } from '@clerk/nextjs/experimental'
 
-      <div className="dates">
-        <p>Active since: {subscription.activeAt.toLocaleDateString()}</p>
-        {subscription.pastDueAt && (
-          <p className="warning">Past due since: {subscription.pastDueAt.toLocaleDateString()}</p>
+  function SubscriptionDetails() {
+    const { data: subscription, isLoading } = useSubscription()
+
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
+
+    if (!subscription) {
+      return <div>No subscription</div>
+    }
+
+    return (
+      <div className="subscription-details">
+        <h2>Subscription Details</h2>
+        <div className="status">
+          Status: <span className={`status-${subscription.status}`}>{subscription.status}</span>
+        </div>
+
+        <div className="dates">
+          <p>Active since: {subscription.activeAt.toLocaleDateString()}</p>
+          {subscription.pastDueAt && (
+            <p className="warning">Past due since: {subscription.pastDueAt.toLocaleDateString()}</p>
+          )}
+        </div>
+
+        {subscription.nextPayment && (
+          <div className="next-payment">
+            <h3>Next Payment</h3>
+            <p>Amount: {subscription.nextPayment.amount.amountFormatted}</p>
+            <p>Due: {subscription.nextPayment.date.toLocaleDateString()}</p>
+          </div>
         )}
+
+        <div className="subscription-items">
+          <h3>Subscription Items</h3>
+          <ul>
+            {subscription.subscriptionItems.map((item) => (
+              <li key={item.id}>{/* Display subscription item details */}</li>
+            ))}
+          </ul>
+        </div>
       </div>
+    )
+  }
+
+  export default function Page() {
+    const { data, isLoading, error, isFetching, revalidate } = useSubscription()
 
-      {subscription.nextPayment && (
-        <div className="next-payment">
-          <h3>Next Payment</h3>
-          <p>Amount: {subscription.nextPayment.amount.amountFormatted}</p>
-          <p>Due: {subscription.nextPayment.date.toLocaleDateString()}</p>
+    if (error) {
+      return (
+        <div className="error-state">
+          <h3>Failed to load subscription</h3>
+          <p>{error.message}</p>
+          <button onClick={revalidate}>Try Again</button>
         </div>
-      )}
-
-      <div className="subscription-items">
-        <h3>Subscription Items</h3>
-        <ul>
-          {subscription.subscriptionItems.map((item) => (
-            <li key={item.id}>{/* Display subscription item details */}</li>
-          ))}
-        </ul>
+      )
+    }
+
+    return (
+      <div className="subscription-status">
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <>
+            <div className="status-indicator">{isFetching && <span>Refreshing...</span>}</div>
+            {data ? <SubscriptionDetails /> : <div>No active subscription</div>}
+          </>
+        )}
       </div>
-    </div>
-  )
-}
+    )
+  }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pricing/subscription-details/page.tsx' }}
+  import { useSubscription } from '@clerk/clerk-react/experimental'
+
+  function SubscriptionDetails() {
+    const { data: subscription, isLoading } = useSubscription()
+
+    if (isLoading) {
+      return <div>Loading subscription...</div>
+    }
 
-export default function Page() {
-  const { data, isLoading, error, isFetching, revalidate } = useSubscription()
+    if (!subscription) {
+      return <div>No subscription</div>
+    }
 
-  if (error) {
     return (
-      <div className="error-state">
-        <h3>Failed to load subscription</h3>
-        <p>{error.message}</p>
-        <button onClick={revalidate}>Try Again</button>
+      <div className="subscription-details">
+        <h2>Subscription Details</h2>
+        <div className="status">
+          Status: <span className={`status-${subscription.status}`}>{subscription.status}</span>
+        </div>
+
+        <div className="dates">
+          <p>Active since: {subscription.activeAt.toLocaleDateString()}</p>
+          {subscription.pastDueAt && (
+            <p className="warning">Past due since: {subscription.pastDueAt.toLocaleDateString()}</p>
+          )}
+        </div>
+
+        {subscription.nextPayment && (
+          <div className="next-payment">
+            <h3>Next Payment</h3>
+            <p>Amount: {subscription.nextPayment.amount.amountFormatted}</p>
+            <p>Due: {subscription.nextPayment.date.toLocaleDateString()}</p>
+          </div>
+        )}
+
+        <div className="subscription-items">
+          <h3>Subscription Items</h3>
+          <ul>
+            {subscription.subscriptionItems.map((item) => (
+              <li key={item.id}>{/* Display subscription item details */}</li>
+            ))}
+          </ul>
+        </div>
       </div>
     )
   }
 
-  return (
-    <div className="subscription-status">
-      {isLoading ? (
-        <div>Loading...</div>
-      ) : (
-        <>
-          <div className="status-indicator">{isFetching && <span>Refreshing...</span>}</div>
-          {data ? <SubscriptionDetails /> : <div>No active subscription</div>}
-        </>
-      )}
-    </div>
-  )
-}
-```
+  export default function Page() {
+    const { data, isLoading, error, isFetching, revalidate } = useSubscription()
+
+    if (error) {
+      return (
+        <div className="error-state">
+          <h3>Failed to load subscription</h3>
+          <p>{error.message}</p>
+          <button onClick={revalidate}>Try Again</button>
+        </div>
+      )
+    }
+
+    return (
+      <div className="subscription-status">
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <>
+            <div className="status-indicator">{isFetching && <span>Refreshing...</span>}</div>
+            {data ? <SubscriptionDetails /> : <div>No active subscription</div>}
+          </>
+        )}
+      </div>
+    )
+  }
+  ```
+</If>
diff --git a/docs/reference/hooks/use-user.mdx b/docs/reference/hooks/use-user.mdx
index 2322c9d0bd..c46f668941 100644
--- a/docs/reference/hooks/use-user.mdx
+++ b/docs/reference/hooks/use-user.mdx
@@ -1,7 +1,597 @@
 ---
 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.
+
+## Example
+
+### Get the current user
+
+The following example uses the `useUser()` hook to access the [`User`](/docs/reference/javascript/user) object, which contains the current user's data such as their full name. The `isLoaded` and `isSignedIn` properties are used to handle the loading state and to check if the user is signed in, respectively.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/Example.tsx' }}
+  import { useUser } from '@clerk/clerk-react'
+
+  export default function Example() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return <div>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/example/page.tsx' }}
+  'use client'
+
+  import { useUser } from '@clerk/nextjs'
+
+  export default function Example() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return <div>Loading...</div>
+    }
+
+    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/page.tsx' }}
+  import { useUser } from '@clerk/react-router'
+
+  export default function Example() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return <div>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useUser } from '@clerk/chrome-extension'
+
+  export default function Example() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return <div>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/tanstack-react-start'
+
+  export default function Example() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return <div>Hello {user.firstName}!</div>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function Example() {
+    const { isSignedIn, user, isLoaded } = useUser()
+
+    if (!isLoaded) {
+      return <View>Loading...</View>
+    }
+
+    if (!isSignedIn) {
+      return <View>Sign in to view this page</View>
+    }
+
+    return <View>Hello {user.firstName}!</View>
+  }
+  ```
+</If>
+
+### Update user data
+
+The following example uses the `useUser()` hook to access the [`User`](/docs/reference/javascript/user) object, which calls the [`update()`](/docs/reference/javascript/user#update) method to update the current user's information.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/Home.tsx' }}
+  import { useUser } from '@clerk/clerk-react'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/page.tsx' }}
+  'use client'
+
+  import { useUser } from '@clerk/nextjs'
+
+  export default function HomePage() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/react-router'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useUser } from '@clerk/chrome-extension'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/tanstack-react-start'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      await user.update({
+        firstName: 'John',
+        lastName: 'Doe',
+      })
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your name</button>
+        <p>user.firstName: {user.firstName}</p>
+        <p>user.lastName: {user.lastName}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+### Reload user data
+
+The following example uses the `useUser()` hook to access the [`User`](/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()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/page.tsx' }}
+  'use client'
+
+  import { useUser } from '@clerk/nextjs'
+
+  export default function HomePage() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/react-router'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useUser } from '@clerk/chrome-extension'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/tanstack-react-start'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useUser } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function Home() {
+    const { isSignedIn, isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+
+    if (!isSignedIn) return null
+
+    const updateUser = async () => {
+      // Update data via an API endpoint
+      const updateMetadata = await fetch('/api/updateMetadata', {
+        method: 'POST',
+        body: JSON.stringify({
+          role: 'admin',
+        }),
+      })
+
+      // Check if the update was successful
+      if ((await updateMetadata.json()).message !== 'success') {
+        throw new Error('Error updating')
+      }
+
+      // If the update was successful, reload the user data
+      await user.reload()
+    }
+
+    return (
+      <>
+        <button onClick={updateUser}>Update your metadata</button>
+        <p>user role: {user.publicMetadata.role}</p>
+      </>
+    )
+  }
+  ```
+</If>
+
+<Typedoc src="clerk-react/use-user-return" />