Skip to content

(react quickstart) small copy updates; fix code highlight #2094

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 2 commits into from
Apr 1, 2025
Merged

(react quickstart) small copy updates; fix code highlight #2094

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ff5343
Update react.mdx
Akul-sada Mar 11, 2025
f8fdf5b
docs review
alexisintech Apr 1, 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
14 changes: 7 additions & 7 deletions docs/quickstarts/react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ VITE_CLERK_PUBLISHABLE_KEY={{pub_key}}

### Import the Clerk publishable key

You will need to import your Clerk publishable key into your application. You can add an `if` statement to check that it is imported and that it exists. This will prevent running the application without the publishable key, and will also prevent TypeScript errors.
You will need to import your Clerk publishable key into your application. You can add an `if` statement to check that it is imported and that it exists. This will prevent running the application without the publishable key and prevent TypeScript errors.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
You will need to import your Clerk publishable key into your application. You can add an `if` statement to check that it is imported and that it exists. This will prevent running the application without the publishable key and prevent TypeScript errors.
You will need to import your Clerk publishable key into your application. You can add an `if` statement to check that it is imported and that it exists. This will prevent running the application without the Publishable Key and prevent TypeScript errors.


```tsx filename="src/main.tsx" {6-7, 9-11}
import React from 'react'
Expand Down Expand Up @@ -151,14 +151,14 @@ ReactDOM.createRoot(document.getElementById('root')!).render(

### Create a header with Clerk components

You can control which content signed in and signed out users can see with Clerk's [prebuilt components](/docs/components/overview). To get started, create a header for your users to sign in or out. To do this, you will use:
You can control which content signed-in and signed-out users can see with Clerk's [prebuilt components](/docs/components/overview). To get started, create a header for your users to sign in or out. To do this, you will use:

- [`<SignedIn>`](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**.
- [`<SignedOut>`](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**.
- [`<UserButton />`](/docs/components/user/user-button): A prebuilt component that comes styled out of the box to show the avatar from the account the user is signed in with.
- [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page or displays the sign-in modal.

```tsx filename="src/App.tsx" {1, 7-12}
```tsx filename="src/App.tsx" {1, 5-12}
import { SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/clerk-react";

export default function App() {
Expand All @@ -185,14 +185,14 @@ React has many options for handling routing, and you are free to choose the opti

## More resources

You can also learn more about Clerk components, how to customize them, and how to use Clerk's client side helpers. The following guides will help you get started.
You can also learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers. The following guides will help you get started.

<div className="container mx-auto my-4">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<Cards title="Prebuilt Components" description="Learn more about Clerk's suite of components that let you quickly add authentication to your app." link="/docs/components/overview" cta="Learn More" />
<Cards title="Prebuilt Components" description=" Learn more about Clerk's suite of components that let you quickly add authentication to your app." link="/docs/components/overview" cta=" Learn More" />

<Cards title="Customization & Localization" description="Learn how to customize and localize Clerk components." link="/docs/components/customization/overview" cta="Learn More" />
<Cards title="Customization & Localization" description=" Learn how to customize and localize Clerk components." link="/docs/components/customization/overview" cta=" Learn More" />

<Cards title="Client Side Helpers" description="Learn more about our client side helpers and how to use them." link="/docs/references/react/use-user" cta="Learn More" />
<Cards title="Client Side Helpers" description=" Learn more about our client side helpers and how to use them." link="/docs/references/react/use-user" cta= "Learn More" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't agree with the spacing updates here

</div>
</div>