From fc57b56c04d823a52278fc41ac60c2ce5b5ac0a0 Mon Sep 17 00:00:00 2001 From: Bret Hudson Date: Fri, 17 Oct 2025 14:57:44 -0700 Subject: [PATCH 1/7] fix: Line marks for Next.js Pages Router --- docs/getting-started/quickstart/pages-router.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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' From a724883faf61f639916118f05a626ba4b77a4091 Mon Sep 17 00:00:00 2001 From: Bret Hudson Date: Fri, 17 Oct 2025 15:06:40 -0700 Subject: [PATCH 2/7] fix: Update React quickstart src/App.tsx to match generated file --- docs/getting-started/quickstart.react.mdx | 46 ++++++++++++++++++----- 1 file changed, 36 insertions(+), 10 deletions(-) diff --git a/docs/getting-started/quickstart.react.mdx b/docs/getting-started/quickstart.react.mdx index 0bda5982dc..a236b707aa 100644 --- a/docs/getting-started/quickstart.react.mdx +++ b/docs/getting-started/quickstart.react.mdx @@ -153,21 +153,47 @@ 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: [2, [12, 19]], fold: [[3, 6], [21, 40]] }} + import { useState } from 'react' import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react' + import reactLogo from './assets/react.svg' + import viteLogo from '/vite.svg' + import './App.css' + + function App() { + const [count, setCount] = useState(0) - export default function App() { return ( -
- - - - - - -
+ <> +
+ + + + + + +
+ +

Vite + React

+
+ +

+ Edit src/App.tsx and save to test HMR +

+
+

Click on the Vite and React logos to learn more

+ ) } + + export default App ``` ## Create your first user From 09e4450da41127baafd0278985ed4bbbd105e761 Mon Sep 17 00:00:00 2001 From: Bret Hudson Date: Fri, 17 Oct 2025 15:10:12 -0700 Subject: [PATCH 3/7] fix: Update line marks on Expo quickstart --- docs/getting-started/quickstart.expo.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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' From 1c7c0960bbcf347f0822b0a3ad1cc117bc3da22e Mon Sep 17 00:00:00 2001 From: Bret Hudson Date: Fri, 17 Oct 2025 15:18:25 -0700 Subject: [PATCH 4/7] fix: Update Astro quickstart line marks --- docs/getting-started/quickstart.astro.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/quickstart.astro.mdx b/docs/getting-started/quickstart.astro.mdx index 17fa8db5d3..2a676e210b 100644 --- a/docs/getting-started/quickstart.astro.mdx +++ b/docs/getting-started/quickstart.astro.mdx @@ -113,7 +113,7 @@ 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, 5], [17, 27]] }} --- import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components' From a7481da01d99b6a57fad1a5c682ab492bf83c7ba Mon Sep 17 00:00:00 2001 From: Bret Hudson Date: Mon, 20 Oct 2025 11:01:40 -0700 Subject: [PATCH 5/7] Trim Layout.astro code, fold CSS block --- docs/getting-started/quickstart.astro.mdx | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/docs/getting-started/quickstart.astro.mdx b/docs/getting-started/quickstart.astro.mdx index 2a676e210b..c8998b7a80 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', mark: [[1, 5], [17, 27]] }} + ```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}

- + + + + + +
From 4a805cd038cdfd4bf36bb4c2e33689c11c8e91ea Mon Sep 17 00:00:00 2001 From: Bret Hudson Date: Mon, 20 Oct 2025 11:34:05 -0700 Subject: [PATCH 6/7] Run Prettier --- docs/getting-started/quickstart.astro.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/quickstart.astro.mdx b/docs/getting-started/quickstart.astro.mdx index c8998b7a80..4bc63f5356 100644 --- a/docs/getting-started/quickstart.astro.mdx +++ b/docs/getting-started/quickstart.astro.mdx @@ -113,7 +113,7 @@ 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', mark: [[1, 3], [15, 22]], fold: [[27, 34]] }} + ```astro {{ filename: 'src/layouts/Layout.astro', mark: [[1, 3], [15, 22]], fold: [[27, 34]] }} --- import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components' --- From 06cd444dae0e828739c88c417a741b14c7a24740 Mon Sep 17 00:00:00 2001 From: Bret Hudson Date: Mon, 27 Oct 2025 09:30:57 -0700 Subject: [PATCH 7/7] fix: Revert additional line additions to React quickstart --- docs/getting-started/quickstart.react.mdx | 46 +++++------------------ 1 file changed, 10 insertions(+), 36 deletions(-) diff --git a/docs/getting-started/quickstart.react.mdx b/docs/getting-started/quickstart.react.mdx index a236b707aa..a28aa4c5bf 100644 --- a/docs/getting-started/quickstart.react.mdx +++ b/docs/getting-started/quickstart.react.mdx @@ -153,47 +153,21 @@ 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: [2, [12, 19]], fold: [[3, 6], [21, 40]] }} - import { useState } from 'react' + ```tsx {{ filename: 'src/App.tsx', mark: [1, [5, 12]] }} import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react' - import reactLogo from './assets/react.svg' - import viteLogo from '/vite.svg' - import './App.css' - - function App() { - const [count, setCount] = useState(0) + export default function App() { return ( - <> -
- - - - - - -
- -

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

Click on the Vite and React logos to learn more

- +
+ + + + + + +
) } - - export default App ``` ## Create your first user