feat(*): Change name to @clerk/react (#6911)

Author: dstaley

.changeset/strong-bars-learn.md

@@ -0,0 +1,10 @@
+---
+'@clerk/chrome-extension': patch
+'@clerk/elements': patch
+'@clerk/clerk-expo': patch
+'@clerk/nextjs': patch
+'@clerk/react-router': patch
+'@clerk/tanstack-react-start': patch
+---
+
+Use new `@clerk/react` package.

.changeset/tame-suits-try.md

@@ -0,0 +1,5 @@
+---
+'@clerk/react': major
+---
+
+Change package name to `@clerk/react`.

.cursor/rules/monorepo.mdc

@@ -1,18 +1,21 @@
 ---
-description: 
-globs: 
+description:
+globs:
 alwaysApply: true
 ---
+
 Monorepo Architecture and Structure
 
 Repository Overview
+
 - This is the official Clerk JavaScript SDK monorepo containing all Clerk authentication packages
 - Clerk provides streamlined user experiences for sign up, sign in, and profile management
 - All packages are published under the @clerk namespace on npm
 - Uses pnpm as the package manager with Turbo for build orchestration
 - Supports multiple JavaScript frameworks and environments
 
 Core Package Categories
+
 - **Core SDK**: `@clerk/clerk-js` - Core browser SDK with UI components
 - **Framework Integrations**: Next.js, React, Vue, Astro, Nuxt, Remix, Express, Fastify
 - **Platform Support**: Expo (React Native), Chrome Extension
@@ -23,6 +26,7 @@ Core Package Categories
 - **Specialized**: `@clerk/agent-toolkit` - AI agent integration tools
 
 Directory Structure
+
 - `packages/` - All publishable packages
 - `integration/` - End-to-end tests and integration templates
 - `playground/` - Development and testing applications
@@ -31,6 +35,7 @@ Directory Structure
 - `tools/` - Internal development tools
 
 Development Workflow
+
 - Use `pnpm dev` to start development mode for all packages
 - Use `pnpm build` to build all packages
 - Use `pnpm test` to run unit tests across all packages
@@ -39,8 +44,9 @@ Development Workflow
 - Changesets for version management and release automation
 
 Framework-Specific Packages
+
 - `@clerk/nextjs` - Next.js App Router and Pages Router support
-- `@clerk/clerk-react` - React hooks and components
+- `@clerk/react` - React hooks and components
 - `@clerk/vue` - Vue.js composables and components
 - `@clerk/astro` - Astro integration with SSR support
 - `@clerk/nuxt` - Nuxt.js module
@@ -50,6 +56,7 @@ Framework-Specific Packages
 - `@clerk/expo` - React Native/Expo SDK
 
 Testing Architecture
+
 - Unit tests with Jest and Vitest
 - Integration tests with Playwright
 - Component testing with React Testing Library
@@ -58,6 +65,7 @@ Testing Architecture
 - Separate test configurations per framework
 
 Build System
+
 - Turbo for monorepo orchestration and caching
 - tsup for TypeScript compilation and bundling
 - ESLint with custom configurations for different package types
@@ -66,26 +74,30 @@ Build System
 - Type checking with TypeScript and publint
 
 Environment Configuration
-- Supports multiple Clerk environment variables (CLERK_*, NEXT_PUBLIC_CLERK_*, etc.)
+
+- Supports multiple Clerk environment variables (CLERK*\*, NEXT_PUBLIC_CLERK*\*, etc.)
 - Development, staging, and production configurations
 - Verdaccio for local npm registry testing
 - Docker support for integration testing
 - CI/CD with GitHub Actions
 
 Localization Support
+
 - `packages/localizations/` contains translations for 30+ languages
 - Modular localization system allowing partial imports
 - Support for RTL languages
 - Framework-agnostic translation utilities
 
 Package Interdependency Rules
+
 - `@clerk/shared` is a common dependency for most packages
 - `@clerk/types` provides TypeScript definitions used across packages
 - `@clerk/backend` is independent and used for server-side operations
 - Framework packages depend on `@clerk/clerk-js` for core functionality
 - Integration packages build upon framework-specific packages
 
 Release Management
+
 - Automated releases with Changesets
 - Semantic versioning across all packages
 - Canary and snapshot releases for testing

.github/workflows/ci.yml

@@ -209,7 +209,7 @@ jobs:
       matrix:
         include:
           - node-version: 20
-            test-filter: '--filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@clerk/nextjs --filter=@clerk/clerk-react --filter=@clerk/shared --filter=@clerk/remix --filter=@clerk/tanstack-react-start --filter=@clerk/elements --filter=@clerk/vue --filter=@clerk/nuxt --filter=@clerk/clerk-expo'
+            test-filter: '--filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@clerk/nextjs --filter=@clerk/react --filter=@clerk/shared --filter=@clerk/remix --filter=@clerk/tanstack-react-start --filter=@clerk/elements --filter=@clerk/vue --filter=@clerk/nuxt --filter=@clerk/clerk-expo'
           - node-version: 22
             test-filter: '**'
 

.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

@@ -199,6 +199,30 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
   "shared/use-user.mdx",
   "shared/user-agent-is-robot.mdx",
   "shared/version-selector.mdx",
+  "react/api-keys.mdx",
+  "react/checkout-button-props.mdx",
+  "react/checkout-button.mdx",
+  "react/clerk-provider-props.mdx",
+  "react/plan-details-button-props.mdx",
+  "react/plan-details-button.mdx",
+  "react/protect.mdx",
+  "react/redirect-to-create-organization.mdx",
+  "react/redirect-to-organization-profile.mdx",
+  "react/redirect-to-user-profile.mdx",
+  "react/subscription-details-button-props.mdx",
+  "react/subscription-details-button.mdx",
+  "react/use-auth.mdx",
+  "react/use-clerk.mdx",
+  "react/use-organization-list.mdx",
+  "react/use-organization.mdx",
+  "react/use-reverification.mdx",
+  "react/use-session-list.mdx",
+  "react/use-session.mdx",
+  "react/use-sign-in-signal.mdx",
+  "react/use-sign-in.mdx",
+  "react/use-sign-up-signal.mdx",
+  "react/use-sign-up.mdx",
+  "react/use-user.mdx",
   "nextjs/auth.mdx",
   "nextjs/build-clerk-props.mdx",
   "nextjs/clerk-middleware-auth-object.mdx",
@@ -208,30 +232,6 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
   "nextjs/create-sync-get-auth.mdx",
   "nextjs/current-user.mdx",
   "nextjs/get-auth.mdx",
-  "clerk-react/api-keys.mdx",
-  "clerk-react/checkout-button-props.mdx",
-  "clerk-react/checkout-button.mdx",
-  "clerk-react/clerk-provider-props.mdx",
-  "clerk-react/plan-details-button-props.mdx",
-  "clerk-react/plan-details-button.mdx",
-  "clerk-react/protect.mdx",
-  "clerk-react/redirect-to-create-organization.mdx",
-  "clerk-react/redirect-to-organization-profile.mdx",
-  "clerk-react/redirect-to-user-profile.mdx",
-  "clerk-react/subscription-details-button-props.mdx",
-  "clerk-react/subscription-details-button.mdx",
-  "clerk-react/use-auth.mdx",
-  "clerk-react/use-clerk.mdx",
-  "clerk-react/use-organization-list.mdx",
-  "clerk-react/use-organization.mdx",
-  "clerk-react/use-reverification.mdx",
-  "clerk-react/use-session-list.mdx",
-  "clerk-react/use-session.mdx",
-  "clerk-react/use-sign-in-signal.mdx",
-  "clerk-react/use-sign-in.mdx",
-  "clerk-react/use-sign-up-signal.mdx",
-  "clerk-react/use-sign-up.mdx",
-  "clerk-react/use-user.mdx",
   "backend/allowlist-identifier.mdx",
   "backend/auth-object.mdx",
   "backend/authenticate-request-options.mdx",

.typedoc/__tests__/file-structure.test.ts

@@ -33,8 +33,8 @@ describe('Typedoc output', () => {
     expect(folders).toMatchInlineSnapshot(`
       [
         "backend",
-        "clerk-react",
         "nextjs",
+        "react",
         "shared",
         "types",
       ]

docs/CONTRIBUTING.md

@@ -44,7 +44,7 @@ All packages of the monorepo are inside [packages](../packages). For package spe
 
 - [`@clerk/backend`](../packages/backend): Functionalities regarded as "core" for Clerk to operate with. _Authentication resolution, API Resources etc._
 - [`@clerk/clerk-js`](../packages/clerk-js): Core JavaScript implementation used by Clerk in the browser.
-- [`@clerk/clerk-react`](../packages/react) Clerk package for React applications.
+- [`@clerk/react`](../packages/react) Clerk package for React applications.
 - [`@clerk/types`](../packages/types): Main TypeScript typings for Clerk libraries.
 - Browse [packages](../packages) to see more
 
@@ -186,10 +186,10 @@ To review your changes locally, you can run `pnpm run typedoc:generate` to gener
 
 Create a PR that includes your changes to any Typedoc comments. Once the PR has been merged and a release is published, a PR will [automatically](https://github.com/clerk/clerk-docs/blob/main/.github/workflows/typedoc.yml) be opened in `clerk-docs` to merge in the Typedoc changes.
 
-Typedoc output is embedded in `clerk-docs` files with the `<Typedoc />` component. For example, if you updated Typedoc comments for the `useAuth()` hook in `clerk/javascript`, you'll need to make sure that in `clerk-docs`, in the `/hooks/use-auth.mdx` file, there's a `<Typedoc />` component linked to the `./clerk-typedoc/clerk-react/use-auth.mdx` file, like:
+Typedoc output is embedded in `clerk-docs` files with the `<Typedoc />` component. For example, if you updated Typedoc comments for the `useAuth()` hook in `clerk/javascript`, you'll need to make sure that in `clerk-docs`, in the `/hooks/use-auth.mdx` file, there's a `<Typedoc />` component linked to the `./clerk-typedoc/react/use-auth.mdx` file, like:
 
 ```mdx
-<Typedoc src='clerk-react/use-auth' />
+<Typedoc src='react/use-auth' />
 ```
 
 Read more about this in the [`clerk-docs` CONTRIBUTING.md](https://github.com/clerk/clerk-docs/blob/main/CONTRIBUTING.md#typedoc-).

integration/README.md

@@ -364,7 +364,7 @@ Assuming you have a `react-parcel` template defined in `integration/templates`,
      .setName('react-parcel')
      .useTemplate(templates['react-parcel'])
      .setEnvFormatter('public', key => `${key}`)
-     .addDependency('@clerk/clerk-react', constants.E2E_CLERK_VERSION || clerkReactLocal);
+     .addDependency('@clerk/react', constants.E2E_CLERK_VERSION || clerkReactLocal);
    ```
 
    Here's what each thing is doing:

integration/presets/custom-flows.ts

@@ -11,7 +11,7 @@ const reactVite = applicationConfig()
   .addScript('dev', 'pnpm dev')
   .addScript('build', 'pnpm build')
   .addScript('serve', 'pnpm preview')
-  .addDependency('@clerk/clerk-react', constants.E2E_CLERK_VERSION || linkPackage('react'))
+  .addDependency('@clerk/react', constants.E2E_CLERK_VERSION || linkPackage('react'))
   .addDependency('@clerk/themes', constants.E2E_CLERK_VERSION || linkPackage('themes'));
 
 export const customFlows = {

integration/presets/react.ts

@@ -11,7 +11,7 @@ const cra = applicationConfig()
   .addScript('dev', 'pnpm start')
   .addScript('build', 'pnpm build')
   .addScript('serve', 'pnpm start')
-  .addDependency('@clerk/clerk-react', constants.E2E_CLERK_VERSION || linkPackage('react'))
+  .addDependency('@clerk/react', constants.E2E_CLERK_VERSION || linkPackage('react'))
   .addDependency('@clerk/themes', constants.E2E_CLERK_VERSION || linkPackage('themes'));
 
 const vite = cra