Skip to content

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

Draft
alexcarpenter wants to merge 1 commit into
mainfrom
carp/mosaic-user-profile-panels
Draft

alexcarpenter wants to merge 1 commit into
mainfrom
carp/mosaic-user-profile-panels

Conversation

@alexcarpenter

Copy link
Copy Markdown
Member

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

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot

changeset-bot Bot commented Oct 9, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 99cf9fa

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

vercel Bot commented Oct 9, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
clerk-js-sandbox Ready Ready Preview Oct 9, 2026 11:18pm UTC
swingset Ready Ready Preview Oct 9, 2026 11:18pm UTC

Request Review

@coderabbitai

coderabbitai Bot commented Oct 9, 2026

Copy link
Copy Markdown
Contributor

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true
  • 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

pkg-pr-new Bot commented Oct 9, 2026

Copy link
Copy Markdown

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-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: 99cf9fa

This branch was successfully deployed

2 active deployments
Preview – swingset — 99cf9fae Deployed Oct 9, 2026 by vercel[bot]
Preview – clerk-js-sandbox — 99cf9fae Deployed Oct 9, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant