diff --git a/docs/getting-started/quickstart.astro.mdx b/docs/getting-started/quickstart.astro.mdx
index 17fa8db5d3..4bc63f5356 100644
--- a/docs/getting-started/quickstart.astro.mdx
+++ b/docs/getting-started/quickstart.astro.mdx
@@ -113,11 +113,9 @@ sdk: astro
- [``](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
- [``](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in).
- ```astro {{ filename: 'src/layouts/Layout.astro' }}
+ ```astro {{ filename: 'src/layouts/Layout.astro', mark: [[1, 3], [15, 22]], fold: [[27, 34]] }}
---
import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components'
-
- const { title } = Astro.props
---
@@ -131,15 +129,12 @@ sdk: astro
-
{title}
-
+
+
+
+
+
+
diff --git a/docs/getting-started/quickstart.expo.mdx b/docs/getting-started/quickstart.expo.mdx
index bbffbeebae..19f5479f3f 100644
--- a/docs/getting-started/quickstart.expo.mdx
+++ b/docs/getting-started/quickstart.expo.mdx
@@ -84,7 +84,7 @@ sdk: expo
Add the component to your root layout as shown in the following example:
- ```tsx {{ filename: 'app/_layout.tsx' }}
+ ```tsx {{ filename: 'app/_layout.tsx', mark: [1, 6, 8] }}
import { ClerkProvider } from '@clerk/clerk-expo'
import { Slot } from 'expo-router'
diff --git a/docs/getting-started/quickstart.react.mdx b/docs/getting-started/quickstart.react.mdx
index 0bda5982dc..a28aa4c5bf 100644
--- a/docs/getting-started/quickstart.react.mdx
+++ b/docs/getting-started/quickstart.react.mdx
@@ -153,7 +153,7 @@ This tutorial will demonstrate how to create a new React app using Vite and add
- [``](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
- [``](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in).
- ```tsx {{ filename: 'src/App.tsx', mark: [1, [6, 11]] }}
+ ```tsx {{ filename: 'src/App.tsx', mark: [1, [5, 12]] }}
import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react'
export default function App() {
diff --git a/docs/getting-started/quickstart/pages-router.mdx b/docs/getting-started/quickstart/pages-router.mdx
index 8cd35f2090..d615c0c07c 100644
--- a/docs/getting-started/quickstart/pages-router.mdx
+++ b/docs/getting-started/quickstart/pages-router.mdx
@@ -110,7 +110,7 @@ sdk: nextjs
- [``](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
- [``](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in).
- ```tsx {{ filename: 'pages/_app.tsx', mark: [[7, 15]] }}
+ ```tsx {{ filename: 'pages/_app.tsx', mark: [2, [7, 18], 20] }}
import '@/styles/globals.css'
import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
import type { AppProps } from 'next/app'