(chore) fix format for component references (#1796)

Co-authored-by: victoria <[email protected]>

CONTRIBUTING.md

@@ -575,7 +575,7 @@ The `<TutorialHero />` component is used at the beginning of a tutorial-type con
 
 - Install `@clerk/nextjs`
 - Set up your environment keys to test your app locally
-- Add `<ClerkProvider />` to your application
+- Add `<ClerkProvider>` to your application
 - Use Clerk middleware to implement route-specific authentication
 - Create a header with Clerk components for users to sign in and out
 

docs/advanced-usage/satellite-domains.mdx

@@ -115,7 +115,7 @@ To access authentication state from a satellite domain, users will be transparen
           # CLERK_SIGN_UP_URL=http://localhost:3000/sign-up
           ```
         </CodeBlockTabs>
-      - You will also need to add the `allowedRedirectOrigins` property to `<ClerkProvider />` on your _primary domain app_ to ensure that the redirect back from primary to satellite domain works correctly. For example:
+      - You will also need to add the `allowedRedirectOrigins` property to `<ClerkProvider>` on your _primary domain app_ to ensure that the redirect back from primary to satellite domain works correctly. For example:
 
         <CodeBlockTabs options={["Development", "Production"]}>
           ```tsx {{ filename: 'app/layout.tsx' }}

docs/guides/architecture-scenarios.mdx

@@ -56,7 +56,7 @@ Clerk offers a number of building blocks to help integrate organizations into yo
 
 - The [`<OrganizationSwitcher />` component](/docs/components/organization/organization-switcher) provides a way for your users to select which organization is active. The [`useOrganizationList()` hook](/docs/organizations/custom-organization-switcher) can be used for more control.
 - The [`useOrganization()` hook](/docs/references/react/use-organization) can be used to fetch the current, active organization.
-- The [`<Protect />` component](/docs/components/protect) enables you to limit who can view certain pages based on their role. Additionally, Clerk exposes a number of helper functions, such as [`auth()`](/docs/references/nextjs/auth), and hooks, such as [`useAuth()`](/docs/references/react/use-auth#how-to-use-the-use-auth-hook), to check the user's authorization throughout your app and API endpoints.
+- The [`<Protect>` component](/docs/components/protect) enables you to limit who can view certain pages based on their role. Additionally, Clerk exposes a number of helper functions, such as [`auth()`](/docs/references/nextjs/auth), and hooks, such as [`useAuth()`](/docs/references/react/use-auth#how-to-use-the-use-auth-hook), to check the user's authorization throughout your app and API endpoints.
 
 The organization's ID should be stored in your database alongside each resource so that it can be used to filter and query the resources that should be rendered or returned according to the active organization.
 

docs/guides/authjs-migration.mdx

@@ -23,7 +23,7 @@ description: Learn how to migrate an application using Auth.js to use Clerk for
 >
   - Install `@clerk/nextjs`
   - Set environment variables
-  - Wrap your Next.js app in `<ClerkProvider />`
+  - Wrap your Next.js app in `<ClerkProvider>`
   - Set up sign-up and sign-in UI
   - Protect your app
   - Read user and session data
@@ -67,9 +67,9 @@ This guide shows how to migrate an application using Auth.js (formerly NextAuth.
   CLERK_SECRET_KEY={{secret}}
   ```
 
-  ### Wrap your Next.js app in `<ClerkProvider />`
+  ### Wrap your Next.js app in `<ClerkProvider>`
 
-  Remove the `<SessionProvider session={session}>` provider from Auth.js and replace it with `<ClerkProvider />`.
+  Remove the `<SessionProvider session={session}>` provider from Auth.js and replace it with `<ClerkProvider>`.
 
   <Include src="_partials/clerk-provider" />
 

docs/quickstarts/chrome-extension.mdx

@@ -21,7 +21,7 @@ description: Add authentication and user management to your Chrome Extension wit
   - Create a new app with Plasmo
   - Install `@clerk/chrome-extension`
   - Set your Clerk API keys
-  - Add `<ClerkProvider />` and Clerk components to your app
+  - Add `<ClerkProvider>` and Clerk components to your app
   - Configure your app to use a consistent CRX ID
   - Build, load, and test your Chrome Extension
 </TutorialHero>

docs/quickstarts/expo.mdx

@@ -27,7 +27,7 @@ description: Add authentication and user management to your Expo app with Clerk.
 >
   - Install `@clerk/expo`
   - Set your Clerk API keys
-  - Add `<ClerkProvider />`
+  - Add `<ClerkProvider>`
   - Protect specific pages with authentication
   - Use Clerk hooks to enable users to sign in and out
 </TutorialHero>

docs/quickstarts/nextjs.mdx

@@ -21,7 +21,7 @@ description: Add authentication and user management to your Next.js app with Cle
   - Install `@clerk/nextjs`
   - Set your Clerk API keys
   - Add `clerkMiddleware()`
-  - Add `<ClerkProvider />` and Clerk components
+  - Add `<ClerkProvider>` and Clerk components
 </TutorialHero>
 
 <Steps>

docs/quickstarts/react.mdx

@@ -23,7 +23,7 @@ description: Add authentication and user management to your React app with Clerk
   - Create a new React app using Vite
   - Install `@clerk/clerk-react`
   - Set your Clerk API keys
-  - Add `<ClerkProvider />`
+  - Add `<ClerkProvider>`
   - Create a header with Clerk components for users to sign in and out
 </TutorialHero>
 

docs/quickstarts/tanstack-start.mdx

@@ -26,7 +26,7 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat
   - Install `@clerk/tanstack-start`
   - Set your Clerk API keys
   - Add `createClerkHandler()`
-  - Add `<ClerkProvider />`
+  - Add `<ClerkProvider>`
   - Protect your pages
 </TutorialHero>
 

docs/telemetry.mdx

@@ -72,7 +72,7 @@ CLERK_TELEMETRY_DISABLED=1
 
 ### `telemetry` prop
 
-If you are using `@clerk/clerk-react` directly, or using an SDK that doesn't have environment variable support, you can opt out by passing the `telemetry` prop to `<ClerkProvider />`:
+If you are using `@clerk/clerk-react` directly, or using an SDK that doesn't have environment variable support, you can opt out by passing the `telemetry` prop to `<ClerkProvider>`:
 
 ```tsx
 <ClerkProvider telemetry={false} />

styleguides/STYLEGUIDE.md

@@ -397,7 +397,7 @@ Component references should be wrapped in `< />` if they are self closing. Other
 
 The last case is incorrect because the `<SignIn />` component will never wrap children, and therefore, should have a self-closing tag.
 
-> Use the `<ClerkProvider />` component.
+> Use the `<ClerkProvider>` component.
 
 The last case is incorrect because the `<ClerkProvider>` component will always wrap children and will never be self-closing.