Uh oh!
There was an error while loading. Please reload this page.
feat(ui): Expose composed profile components - #9144
Merged
Merged
Conversation
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: cd3228b The changes in this PR will be included in the next version bump. This PR includes changesets to release 23 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
📝 WalkthroughWalkthroughThe change introduces experimental composable Estimated code review effort: 5 (Critical) | ~120 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Comment |
This was referenced Jul 13, 2026
Merged
This was referenced Jul 13, 2026
@clerk/astro@clerk/backend@clerk/chrome-extension@clerk/clerk-js@clerk/electron@clerk/electron-passkeys@clerk/eslint-plugin@clerk/expo@clerk/expo-google-signin@clerk/expo-passkeys@clerk/express@clerk/fastify@clerk/hono@clerk/localizations@clerk/nextjs@clerk/nuxt@clerk/react@clerk/react-router@clerk/shared@clerk/tanstack-react-start@clerk/testing@clerk/ui@clerk/upgrade@clerk/vuecommit: |
alexcarpenterforce-pushed
the
carp/profile-release
branch
from
July 13, 2026 14:12
b90f4c7 to
c325d8fComparealexcarpenterforce-pushed
the
carp/profile-release
branch
from
July 16, 2026 13:35
64314fc to
a28f465Comparealexcarpenter
marked this pull request as ready for review
July 16, 2026 13:46
4 tasks
Contributor
API Changes Report
Summary
@clerk/uiCurrent version: 1.25.6 Subpath |
alexcarpenter
commented
Jul 16, 2026
MemberAuthor
!snapshot |
Contributor
Hey @alexcarpenter - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/astro@3.4.19-snapshot.v20260716135136 --save-exact
npm i @clerk/backend@3.11.7-snapshot.v20260716135136 --save-exact
npm i @clerk/chrome-extension@3.1.54-snapshot.v20260716135136 --save-exact
npm i @clerk/clerk-js@6.25.5-snapshot.v20260716135136 --save-exact
npm i @clerk/electron@0.0.15-snapshot.v20260716135136 --save-exact
npm i @clerk/electron-passkeys@0.0.4-snapshot.v20260716135136 --save-exact
npm i @clerk/eslint-plugin@0.2.1-snapshot.v20260716135136 --save-exact
npm i @clerk/expo@3.7.7-snapshot.v20260716135136 --save-exact
npm i @clerk/expo-passkeys@1.2.6-snapshot.v20260716135136 --save-exact
npm i @clerk/express@2.1.43-snapshot.v20260716135136 --save-exact
npm i @clerk/fastify@3.1.53-snapshot.v20260716135136 --save-exact
npm i @clerk/headless@0.0.13-snapshot.v20260716135136 --save-exact
npm i @clerk/hono@0.1.53-snapshot.v20260716135136 --save-exact
npm i @clerk/localizations@4.13.5-snapshot.v20260716135136 --save-exact
npm i @clerk/msw@0.0.49-snapshot.v20260716135136 --save-exact
npm i @clerk/nextjs@7.5.20-snapshot.v20260716135136 --save-exact
npm i @clerk/nuxt@2.6.19-snapshot.v20260716135136 --save-exact
npm i @clerk/react@6.12.5-snapshot.v20260716135136 --save-exact
npm i @clerk/react-router@3.5.12-snapshot.v20260716135136 --save-exact
npm i @clerk/shared@4.25.5-snapshot.v20260716135136 --save-exact
npm i @clerk/swingset@0.0.20-snapshot.v20260716135136 --save-exact
npm i @clerk/tanstack-react-start@1.4.20-snapshot.v20260716135136 --save-exact
npm i @clerk/testing@2.2.10-snapshot.v20260716135136 --save-exact
npm i @clerk/ui@1.26.0-snapshot.v20260716135136 --save-exact
npm i @clerk/upgrade@2.0.5-snapshot.v20260716135136 --save-exact
npm i @clerk/vue@2.4.17-snapshot.v20260716135136 --save-exact |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx (1)
31-55: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winMemoize the context value to avoid needless consumer re-renders.
orgProfileCtxValue(including a brand-newcustomPages: []array) is recreated on every render and passed straight intoOrganizationProfileContext.Provider. Any consumer relying on referential identity (e.g. auseEffect/useMemodependency oncustomPagesor the context object itself) will re-run needlessly on every re-render of this provider.♻️ Suggested fix
- const orgProfileCtxValue = {- componentName: 'OrganizationProfile' as const,- mode: 'mounted' as const,- routing: 'hash' as const,- path: undefined,- afterLeaveOrganizationUrl,- apiKeysProps,- customPages: [],- };+ const orgProfileCtxValue = useMemo(+ () => ({+ componentName: 'OrganizationProfile' as const,+ mode: 'mounted' as const,+ routing: 'hash' as const,+ path: undefined,+ afterLeaveOrganizationUrl,+ apiKeysProps,+ customPages: [],+ }),+ [afterLeaveOrganizationUrl, apiKeysProps],+ );As per coding guidelines,
**/*.{tsx,jsx}should "Minimize re-renders in React components" and "Use proper useMemo for expensive computations in React components."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx` around lines 31 - 55, Memoize orgProfileCtxValue in OrganizationProfileProvider so its object identity remains stable across renders, including the customPages array. Use React’s memoization hook with dependencies covering afterLeaveOrganizationUrl and apiKeysProps, while keeping the existing context fields and provider behavior unchanged.Source: Coding guidelines
packages/ui/src/experimental/index.ts (1)
10-10: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace the chained wildcard barrels with deliberate public exports.
The intermediate and published barrels together expose future symbols and collisions through
@clerk/ui/experimental.
packages/ui/src/experimental/index.ts#L10-L10: explicitly export the supported experimental components from their leaf modules.packages/ui/src/composed/index.ts#L1-L2: remove the intermediate wildcard aggregation or replace it with an explicit internal export list.As per coding guidelines, “Avoid barrel files (
index.tsre-exports) as they can cause circular dependencies.”🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/experimental/index.ts` at line 10, Replace the wildcard export in packages/ui/src/experimental/index.ts at line 10 with explicit exports of the supported experimental components from their leaf modules. In packages/ui/src/composed/index.ts at lines 1-2, remove the wildcard aggregation or replace it with an explicit internal export list so future symbols and collisions are not exposed.Source: Coding guidelines
integration/tests/composed-components.test.ts (1)
31-45: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winAdd an integration fixture without a local
'use client'boundary.This page becomes a Client Component, so it cannot verify the advertised ability to import and render these exports directly from a React Server Component. Add a minimal server page that imports the experimental components and asserts they render.
As per coding guidelines, include tests for all new features.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@integration/tests/composed-components.test.ts` around lines 31 - 45, Update the composedUserProfilePage fixture to remove the local 'use client' directive and keep it as a minimal React Server Component that imports and renders the experimental UserProfile exports. Ensure the integration test asserts successful rendering from this server page, covering the direct server-component import path for all newly supported components.Source: Coding guidelines
packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx (1)
18-18: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd explicit return types to exported components.
packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx#L18-L18: annotate the component return type.packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx#L46-L46: annotate the newly exported component return type.packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx#L26-L26: annotate the exported component return type.As per coding guidelines, exported TypeScript APIs require explicit return types; based on learnings, this repository enforces that for exported functions.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx` at line 18, Add explicit return type annotations to the exported components ProfilePagePanel, ConfigureSSO, and ProfileCardPage. Update each component declaration at packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx:18-18, packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx:46-46, and packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx:26-26, using the appropriate React component return type while preserving their existing behavior.Sources: Coding guidelines, Learnings
packages/ui/src/composed/UserProfile/UserProfileProvider.tsx (1)
29-37: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winMemoize the context value to avoid re-rendering the whole composed subtree.
userProfileCtxValueis a new object every render, so all descendants consumingUserProfileContextre-render on everyUserProfileProviderrender regardless of whether any field changed.ProfileProviderShellalready memoizes its comparable derived values (router,options), so this is inconsistent with the pattern elsewhere in the layer.As per coding guidelines, "**/*.{jsx,tsx}": "Use proper useMemo for expensive computations in React components" and "Minimize re-renders in React components."
♻️ Proposed fix
+import { useMemo } from 'react'; ... - const userProfileCtxValue = {- componentName: 'UserProfile' as const,- mode: 'mounted' as const,- routing: 'hash' as const,- path: undefined,- additionalOAuthScopes,- apiKeysProps,- customPages: [],- };+ const userProfileCtxValue = useMemo(+ () => ({+ componentName: 'UserProfile' as const,+ mode: 'mounted' as const,+ routing: 'hash' as const,+ path: undefined,+ additionalOAuthScopes,+ apiKeysProps,+ customPages: [],+ }),+ [additionalOAuthScopes, apiKeysProps],+ );🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/composed/UserProfile/UserProfileProvider.tsx` around lines 29 - 37, Memoize the userProfileCtxValue object in UserProfileProvider with React.useMemo, using all values included in the context object—especially additionalOAuthScopes and apiKeysProps—as dependencies; preserve the existing constant fields and empty customPages value.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@integration/tests/composed-components.test.ts`:
- Around line 127-130: Update the afterAll cleanup blocks around fake users,
organizations, and related temporary entities to use try/finally so each entity
deletion is attempted safely and app.teardown() always runs independently of API
cleanup failures. Preserve the existing cleanup targets and ordering where
possible while ensuring failures in assertions or deletion do not prevent
subsequent cleanup.
In `@packages/ui/src/composed/__tests__/action-animation.test.tsx`:
- Around line 16-26: Replace any-based animation helper types with
Parameters<Element['animate']> call tuples and Keyframe/Keyframe[] types in
findAddAnimationCall and the corresponding helpers in
packages/ui/src/composed/__tests__/action-animation.test.tsx (lines 16-26) and
packages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsx (lines
28-48). In packages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsx
(lines 62-68), replace the as any mock result with an Animation-typed fixture or
narrow Partial<Animation> cast.
In `@packages/ui/src/styledSystem/createEmotionCache.ts`:
- Around line 3-4: Update the Emotion insert override in createEmotionCache so
its assigned function inherits cache.insert’s parameter types instead of
declaring an explicit any; keep sheet typed as Emotion’s StyleSheet and remove
the now-unused SerializedStyles import.
---
Nitpick comments:
In `@integration/tests/composed-components.test.ts`:
- Around line 31-45: Update the composedUserProfilePage fixture to remove the
local 'use client' directive and keep it as a minimal React Server Component
that imports and renders the experimental UserProfile exports. Ensure the
integration test asserts successful rendering from this server page, covering
the direct server-component import path for all newly supported components.
In
`@packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx`:
- Around line 31-55: Memoize orgProfileCtxValue in OrganizationProfileProvider
so its object identity remains stable across renders, including the customPages
array. Use React’s memoization hook with dependencies covering
afterLeaveOrganizationUrl and apiKeysProps, while keeping the existing context
fields and provider behavior unchanged.
In `@packages/ui/src/composed/UserProfile/UserProfileProvider.tsx`:
- Around line 29-37: Memoize the userProfileCtxValue object in
UserProfileProvider with React.useMemo, using all values included in the context
object—especially additionalOAuthScopes and apiKeysProps—as dependencies;
preserve the existing constant fields and empty customPages value.
In `@packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx`:
- Line 18: Add explicit return type annotations to the exported components
ProfilePagePanel, ConfigureSSO, and ProfileCardPage. Update each component
declaration at packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx:18-18,
packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx:46-46, and
packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx:26-26, using the
appropriate React component return type while preserving their existing
behavior.
In `@packages/ui/src/experimental/index.ts`:
- Line 10: Replace the wildcard export in packages/ui/src/experimental/index.ts
at line 10 with explicit exports of the supported experimental components from
their leaf modules. In packages/ui/src/composed/index.ts at lines 1-2, remove
the wildcard aggregation or replace it with an explicit internal export list so
future symbols and collisions are not exposed.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 4b6a5164-137f-461f-85b0-6ad847013b23
⛔ Files ignored due to path filters (1)
packages/ui/src/experimental/__tests__/__snapshots__/flat-exports.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (85)
.changeset/profile-section-components.md.changeset/shared-moduleManager-registry.mdintegration/tests/composed-components.test.tspackages/clerk-js/src/core/clerk.tspackages/react/src/__tests__/isomorphicClerk.test.tspackages/react/src/isomorphicClerk.tspackages/shared/src/types/clerk.tspackages/ui/package.jsonpackages/ui/src/components/ConfigureSSO/ConfigureSSO.tsxpackages/ui/src/components/OrganizationProfile/OrganizationBillingPage.tsxpackages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsxpackages/ui/src/components/OrganizationProfile/OrganizationMembers.tsxpackages/ui/src/components/UserProfile/APIKeysPage.tsxpackages/ui/src/components/UserProfile/AccountPage.tsxpackages/ui/src/components/UserProfile/AccountSections.tsxpackages/ui/src/components/UserProfile/BillingPage.tsxpackages/ui/src/components/UserProfile/SecurityPage.tsxpackages/ui/src/components/UserProfile/SecuritySections.tsxpackages/ui/src/components/UserProfile/Web3Form.tsxpackages/ui/src/components/UserProfile/__tests__/AccountSections.test.tsxpackages/ui/src/components/UserProfile/__tests__/SecuritySections.test.tsxpackages/ui/src/components/UserProfile/__tests__/Web3Section.test.tsxpackages/ui/src/composed/APIKeysSection.tsxpackages/ui/src/composed/BillingSection.tsxpackages/ui/src/composed/OrganizationProfile/APIKeys.tsxpackages/ui/src/composed/OrganizationProfile/Billing.tsxpackages/ui/src/composed/OrganizationProfile/General.tsxpackages/ui/src/composed/OrganizationProfile/GeneralDeleteOrganization.tsxpackages/ui/src/composed/OrganizationProfile/GeneralLeaveOrganization.tsxpackages/ui/src/composed/OrganizationProfile/GeneralOrganizationProfile.tsxpackages/ui/src/composed/OrganizationProfile/GeneralVerifiedDomains.tsxpackages/ui/src/composed/OrganizationProfile/Members.tsxpackages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsxpackages/ui/src/composed/OrganizationProfile/Security.tsxpackages/ui/src/composed/OrganizationProfile/index.tsxpackages/ui/src/composed/PageContext.tsxpackages/ui/src/composed/ProfileProviderShell.tsxpackages/ui/src/composed/UserProfile/APIKeys.tsxpackages/ui/src/composed/UserProfile/Account.tsxpackages/ui/src/composed/UserProfile/AccountConnectedAccounts.tsxpackages/ui/src/composed/UserProfile/AccountEmails.tsxpackages/ui/src/composed/UserProfile/AccountEnterpriseAccounts.tsxpackages/ui/src/composed/UserProfile/AccountPhone.tsxpackages/ui/src/composed/UserProfile/AccountProfile.tsxpackages/ui/src/composed/UserProfile/AccountUsername.tsxpackages/ui/src/composed/UserProfile/AccountWeb3.tsxpackages/ui/src/composed/UserProfile/Billing.tsxpackages/ui/src/composed/UserProfile/Security.tsxpackages/ui/src/composed/UserProfile/SecurityActiveDevices.tsxpackages/ui/src/composed/UserProfile/SecurityDelete.tsxpackages/ui/src/composed/UserProfile/SecurityMfa.tsxpackages/ui/src/composed/UserProfile/SecurityPasskeys.tsxpackages/ui/src/composed/UserProfile/SecurityPassword.tsxpackages/ui/src/composed/UserProfile/UserProfileProvider.tsxpackages/ui/src/composed/UserProfile/index.tsxpackages/ui/src/composed/__tests__/OrganizationProfile.test.tsxpackages/ui/src/composed/__tests__/OrganizationProfileSections.test.tsxpackages/ui/src/composed/__tests__/UserProfile.test.tsxpackages/ui/src/composed/__tests__/UserProfileSections.test.tsxpackages/ui/src/composed/__tests__/action-animation.test.tsxpackages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsxpackages/ui/src/composed/__tests__/composed-provider-wiring.test.tsxpackages/ui/src/composed/__tests__/hotload-vs-bundle-risks.test.tsxpackages/ui/src/composed/__tests__/stub-limitations.test.tspackages/ui/src/composed/__tests__/style-cache-sharing.test.tsxpackages/ui/src/composed/createSection.tsxpackages/ui/src/composed/index.tspackages/ui/src/composed/stubRouter.tspackages/ui/src/composed/useBillingRouter.tspackages/ui/src/composed/useRequirePage.tspackages/ui/src/customizables/elementDescriptors.tspackages/ui/src/elements/Animated.tsxpackages/ui/src/elements/AppearanceOverrides.tsxpackages/ui/src/elements/ProfileCard/ProfileCardPage.tsxpackages/ui/src/elements/ProfileCard/ProfilePagePanel.tsxpackages/ui/src/elements/ProfileCard/__tests__/ProfilePagePanel.test.tsxpackages/ui/src/elements/ProfileCard/index.tspackages/ui/src/experimental/__tests__/flat-exports.test.tspackages/ui/src/experimental/index.tspackages/ui/src/hooks/useSafeState.tspackages/ui/src/internal/appearance.tspackages/ui/src/internal/styleCacheStore.tspackages/ui/src/styledSystem/StyleCacheProvider.tsxpackages/ui/src/styledSystem/createEmotionCache.tspackages/ui/tsdown.config.mts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
clerk/clerk_go(manual)clerk/dashboard(manual)clerk/accounts(manual)clerk/backoffice(manual)clerk/clerk(manual)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
- Remove `any` from createEmotionCache insert override and animation test helpers - Type animation call tuples via Parameters<Element['animate']> - Make integration test cleanup failure-safe with try/finally
brkalow
approved these changes
Jul 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ships the experimental composed profile API under
@clerk/ui/experimental. Lets developers build the profile UI from flat, individually-mountable panel and section components instead of the monolithic<UserProfile />/<OrganizationProfile />. Each export is a top-level client reference, so it renders directly in an RSC tree without a consumer'use client'boundary.What this exposes
New entrypoint:
@clerk/ui/experimental.UserProfile
UserProfileProviderUserProfileAccountPanel,UserProfileSecurityPanel,UserProfileBillingPanel,UserProfileAPIKeysPanelUserProfileProfileSection,UserProfileUsernameSection,UserProfileEmailSection,UserProfilePhoneSection,UserProfileConnectedAccountsSection,UserProfileEnterpriseAccountsSection,UserProfileWeb3SectionUserProfilePasswordSection,UserProfilePasskeysSection,UserProfileMfaSection,UserProfileActiveDevicesSection,UserProfileDeleteSectionOrganizationProfile
OrganizationProfileProviderOrganizationProfileGeneralPanel,OrganizationProfileMembersPanel,OrganizationProfileBillingPanel,OrganizationProfileAPIKeysPanel,OrganizationProfileSecurityPanelOrganizationProfileProfileSection,OrganizationProfileDomainsSection,OrganizationProfileLeaveSection,OrganizationProfileDeleteSectionSection wrappers render the same underlying components as standard
<UserProfile />/<OrganizationProfile />, so behavior matches; E2E parity coverage added.Experimental: API may change; gated behind the
/experimentalentrypoint.