feat(mosaic): render self-contained sections in user profile panels by alexcarpenter · Pull Request #10187 · clerk/javascript

alexcarpenter · 2026-10-09T23:15:25Z

Description

User profile panels now work like the legacy ones: each section is a self-contained connected component that renders its own card and hides itself when it does not apply, and the panels render a title plus children.

<UserProfileProfilePanel />

<UserProfileProfilePanel>
  <UserProfileProfileSection />
  <UserProfileEmailSection />
</UserProfileProfilePanel>

New connected UserProfileProfilePanel. Without children it renders the profile, email, phone, connected accounts, enterprise accounts, Web3 wallets and danger sections.
UserProfileSecurityPanel takes children. Without them it renders the password, passkeys, 2-step verification and active devices sections.
UserProfileProfilePanelView and UserProfileSecurityPanelView take children in place of the *Slot props. The security view no longer takes the MFA props, and the Authentication group card is gone.
The password, passkeys and MFA section views render their own Section.Root card.
UserProfileSecurityPanel no longer takes passwordFallback. Pass fallback to the section instead.
Swingset fixtures, stories and the two panel docs use children.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2026-10-09T23:15:31Z

🦋 Changeset detected

Latest commit: 0f8924b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

vercel · 2026-10-09T23:15:32Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
clerk-js-sandbox	Ready	Preview	Oct 15, 2026 5:49pm UTC
swingset	Ready	Preview	Oct 15, 2026 5:49pm UTC

coderabbitai · 2026-10-09T23:15:36Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Last reviewed commit: 8f9afcc
Latest commit, not reviewed: 0f8924b

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Team
Run ID: e7456ca6-eb3a-4b9e-bf35-860081fc2a42

📥 Commits

Reviewing files that changed from the base of the PR and between 00dec4c and 8f9afcc.

📒 Files selected for processing: 1

packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx

🔗 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)
clerk/clerk-ios (auto-detected)
clerk/clerk-android (auto-detected)
clerk/cli (auto-detected)

Included review availability: This review used your included allowance. 4 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.

📝 Walkthrough

The profile and security panel APIs now accept section children instead of named slot props. The profile panel provides default sections when no children are supplied. The security panel also supplies default sections, while its view renders supplied children directly. Password, passkey, and security-list views now use Section.Root. Tests, fixtures, stories, and documentation were updated for child-based composition.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~25 minutes

Suggested reviewers: austincalvelage

Merge Risk: ⚪ Minimal · up to 8f9af

The reviewed change has no identified blocker to merging after normal checks.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 4.55% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 22 functions across 20 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: making user profile panel sections self-contained.
Description check		The description accurately explains the self-contained sections, children-based panel composition, removed slot and MFA props, documentation updates, and affected panel behavior.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

pkg-pr-new · 2026-10-09T23:18:27Z

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@10187

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@10187

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@10187

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@10187

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@10187

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@10187

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@10187

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@10187

@clerk/expo-biometrics

npm i https://pkg.pr.new/@clerk/expo-biometrics@10187

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@10187

@clerk/expo-native-components

npm i https://pkg.pr.new/@clerk/expo-native-components@10187

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@10187

@clerk/express

npm i https://pkg.pr.new/@clerk/express@10187

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@10187

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@10187

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@10187

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@10187

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@10187

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@10187

@clerk/react

npm i https://pkg.pr.new/@clerk/react@10187

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@10187

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@10187

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@10187

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@10187

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@10187

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@10187

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@10187

commit: 0f8924b

Ephem

This is really nice, love to see it coming together!

Ephem · 2026-10-15T15:10:11Z

 import type { UserProfilePasskey } from './user-profile-passkeys-section.view';

 export type { UserProfileDevice, UserProfileMfaAddableMethod, UserProfileMfaMethod, UserProfilePasskey };


NIT: 🤖 thinks some/all of these type import/reexports can be removed now.

Good catch, removed in 8f9afcc

… view

alexcarpenter mentioned this pull request Oct 9, 2026

feat(swingset): add live user profile panels and API keys pages #10188

Merged

1 of 9 tasks

github-actions Bot added the mosaic label Oct 9, 2026

vercel Bot deployed to Preview – clerk-js-sandbox October 9, 2026 23:16

View deployment

alexcarpenter added this pull request to stack #10190 October 9, 2026 23:17

vercel Bot deployed to Preview – swingset October 9, 2026 23:18

View deployment

alexcarpenter marked this pull request as ready for review October 13, 2026 14:53

alexcarpenter requested a review from Ephem October 13, 2026 15:00

alexcarpenter force-pushed the carp/mosaic-user-profile-panels branch from 99cf9fa to 857a8dd Compare October 14, 2026 18:50

vercel Bot deployed to Preview – clerk-js-sandbox October 14, 2026 18:50

View deployment

vercel Bot deployed to Preview – swingset October 14, 2026 18:52

View deployment

alexcarpenter force-pushed the carp/mosaic-user-profile-panels branch from 857a8dd to a029fca Compare October 14, 2026 19:17

vercel Bot deployed to Preview – clerk-js-sandbox October 14, 2026 19:18

View deployment

vercel Bot deployed to Preview – swingset October 14, 2026 19:19

View deployment

alexcarpenter force-pushed the carp/mosaic-user-profile-panels branch from a029fca to 00dec4c Compare October 14, 2026 21:01

vercel Bot deployed to Preview – clerk-js-sandbox October 14, 2026 21:01

View deployment

vercel Bot deployed to Preview – swingset October 14, 2026 21:03

View deployment

Ephem approved these changes Oct 15, 2026

View reviewed changes

alexcarpenter force-pushed the carp/mosaic-user-profile-panels branch from 00dec4c to 8f9afcc Compare October 15, 2026 17:29

vercel Bot deployed to Preview – clerk-js-sandbox October 15, 2026 17:30

View deployment

vercel Bot deployed to Preview – swingset October 15, 2026 17:31

View deployment

alexcarpenter added 3 commits October 15, 2026 13:45

feat(mosaic): render self-contained sections in user profile panels

380f727

refactor(mosaic): inline the password section render helper

38c6d5a

refactor(mosaic): drop unused type re-exports from the security panel…

0f8924b

… view

alexcarpenter force-pushed the carp/mosaic-user-profile-panels branch from 8f9afcc to 0f8924b Compare October 15, 2026 17:47

vercel Bot deployed to Preview – clerk-js-sandbox October 15, 2026 17:47

View deployment

vercel Bot deployed to Preview – swingset October 15, 2026 17:49

View deployment

alexcarpenter merged commit 3068fe9 into main Oct 15, 2026
52 checks passed

alexcarpenter deleted the carp/mosaic-user-profile-panels branch October 15, 2026 18:03

Navigation Menu

Repository navigation

feat(mosaic): render self-contained sections in user profile panels - #10187

feat(mosaic): render self-contained sections in user profile panels#10187
alexcarpenter merged 3 commits into
mainfrom
carp/mosaic-user-profile-panels

alexcarpenter commented Oct 9, 2026

Uh oh!

changeset-bot Bot commented Oct 9, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Oct 9, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 9, 2026 •

edited

Loading

Reviews paused

Uh oh!

pkg-pr-new Bot commented Oct 9, 2026 •

edited

Loading

Uh oh!

Ephem left a comment

Uh oh!

Ephem Oct 15, 2026

Uh oh!

alexcarpenter Oct 15, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		import type { UserProfilePasskey } from './user-profile-passkeys-section.view';

		export type { UserProfileDevice, UserProfileMfaAddableMethod, UserProfileMfaMethod, UserProfilePasskey };

Conversation

alexcarpenter commented Oct 9, 2026

Description

Checklist

Type of change

Uh oh!

changeset-bot Bot commented Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel Bot commented Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Uh oh!

pkg-pr-new Bot commented Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Ephem left a comment

Choose a reason for hiding this comment

Uh oh!

Ephem Oct 15, 2026

Choose a reason for hiding this comment

Uh oh!

alexcarpenter Oct 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Oct 9, 2026 •

edited

Loading

vercel Bot commented Oct 9, 2026 •

edited

Loading

coderabbitai Bot commented Oct 9, 2026 •

edited

Loading

pkg-pr-new Bot commented Oct 9, 2026 •

edited

Loading