Skip to content

Bret/update quickstart line marks #2720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Oct 27, 2025
Merged

Bret/update quickstart line marks #2720

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
fc57b56
fix: Line marks for Next.js Pages Router
BretHudson Oct 17, 2025
a724883
fix: Update React quickstart src/App.tsx to match generated file
BretHudson Oct 17, 2025
09e4450
fix: Update line marks on Expo quickstart
BretHudson Oct 17, 2025
1c7c096
fix: Update Astro quickstart line marks
BretHudson Oct 17, 2025
a7481da
Trim Layout.astro code, fold CSS block
BretHudson Oct 20, 2025
4a805cd
Run Prettier
BretHudson Oct 20, 2025
1b83e68
Merge branch 'main' into bret/update-quickstart-line-marks
SarahSoutoul Oct 21, 2025
06cd444
fix: Revert additional line additions to React quickstart
BretHudson Oct 27, 2025
497247f
Merge branch 'main' into bret/update-quickstart-line-marks
BretHudson Oct 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 7 additions & 12 deletions docs/getting-started/quickstart.astro.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,11 +113,9 @@ sdk: astro
- [`<UserButton />`](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
- [`<SignInButton />`](/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
---

<!doctype html>
Expand All @@ -131,15 +129,12 @@ sdk: astro
</head>
<body>
<header>
<h1>{title}</h1>
<nav>
<SignedOut>
<SignInButton mode="modal" />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</nav>
<SignedOut>
<SignInButton mode="modal" />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
<slot />
</body>
Expand Down
2 changes: 1 addition & 1 deletion docs/getting-started/quickstart.expo.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down
46 changes: 36 additions & 10 deletions docs/getting-started/quickstart.react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,21 +153,47 @@ This tutorial will demonstrate how to create a new React app using Vite and add
- [`<UserButton />`](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
- [`<SignInButton />`](/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 (
<header>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
<>
<header>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">Click on the Vite and React logos to learn more</p>
</>
)
}

export default App
```

## Create your first user
Expand Down
2 changes: 1 addition & 1 deletion docs/getting-started/quickstart/pages-router.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ sdk: nextjs
- [`<UserButton />`](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
- [`<SignInButton />`](/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'
Expand Down