Skip to content

feat(ui): add Mosaic Avatar component - #9230

Merged
alexcarpenter merged 12 commits into
mainfrom
carp/mosaic-avatar
Jul 28, 2026
Merged

feat(ui): add Mosaic Avatar component#9230
alexcarpenter merged 12 commits into
mainfrom
carp/mosaic-avatar

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Jul 23, 2026•
edited
Loading

Copy link
Copy Markdown
Member

Description

Adds a new Mosaic Avatar component built with StyleX, following the Button pilot's authoring pattern.

Props:

  • shape: circle (default) | square
  • size: lg | md (default) | sm | xs
  • src / alt: renders an <img> filling the clipped box; otherwise children render as the centered fallback

Styling notes:

  • Square shape uses a fixed 6px border radius for now (does not yet map to a --cl-radius-* token).
  • Sizes drawn from the spacing scale: xs 24px, sm 32px, md 40px, lg 48px, with fallback font-size scaling per size.
  • Emits the standard public contract: cl-avatar class + data-shape / data-size attrs, overridable via consumer className/style.

Swingset

Documented at /components/avatar (stories + MDX, wired into registry.ts and DocsViewer).

Preview: https://swingset-git-carp-mosaic-avatar.clerkstage.dev/components/avatar

Checklist

  • Changeset added (@clerk/ui minor)
  • Unit tests (5 passing)
  • build:mosaic extracts avatar CSS
  • ESLint clean (all @stylexjs rules)

@changeset-bot

changeset-botBot commented Jul 23, 2026•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 168ae35

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

This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch

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

vercelBot commented Jul 23, 2026•
edited
Loading

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 7:04pm
swingsetReadyReadyPreview, CommentJul 28, 2026 7:04pm

Request Review

@pkg-pr-new

pkg-pr-newBot commented Jul 23, 2026•
edited
Loading

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-google-signin

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 168ae35

@github-actions

github-actionsBot commented Jul 23, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-07-28T19:05:33.102Z

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

No API Changes Detected

All packages have stable APIs with no detected changes.

Report generated by Break Check

Last ran on 168ae35.

@coderabbitai

coderabbitaiBot commented Jul 23, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

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.

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
📝 Walkthrough

Walkthrough

Adds a Mosaic Avatar compound component with StyleX styling, shape and size variants, image loading, fallback handling, ref forwarding, public exports, and tests. Swingset gains Avatar stories, MDX documentation, registry registration, and documentation route resolution. A minor changeset and repository import guidance are also included.

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

Possibly related PRs

  • clerk/javascript#9221: Extends the same Swingset documentation and registry wiring for a different component.
  • clerk/javascript#9252: Uses the same Swingset documentation and registry plumbing for another component.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 28.57% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding a Mosaic Avatar component in ui.
Description check✅ PassedThe description matches the changeset, including the Avatar API, styling, docs, tests, and changeset.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

coderabbitai[bot]
coderabbitaiBot reviewed Jul 23, 2026
View reviewed changes

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/ui/src/mosaic/components/avatar/avatar.tsx (1)

22-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add explicit return types to exported TypeScript functions.

The Avatar render callback and exported story functions currently rely on inference. Add explicit React element return types, using a type-only ReactElement import in the stories file if needed.

  • packages/ui/src/mosaic/components/avatar/avatar.tsx#L22-L25: annotate MosaicAvatar’s return type.
  • packages/swingset/src/stories/avatar.stories.tsx#L37-L39: annotate Primary.
  • packages/swingset/src/stories/avatar.stories.tsx#L41-L49: annotate Image.
  • packages/swingset/src/stories/avatar.stories.tsx#L51-L80: annotate Sizes.
  • packages/swingset/src/stories/avatar.stories.tsx#L82-L99: annotate Shapes.

As per coding guidelines, TypeScript functions, especially public APIs, must have explicit return types.

🤖 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/mosaic/components/avatar/avatar.tsx` around lines 22 - 25,
Add explicit React element return types to the Avatar render callback in
packages/ui/src/mosaic/components/avatar/avatar.tsx and to the exported story
functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 27-35: Update the prop spread order in the Avatar component’s span
so arbitrary ...rest props are applied before the generated themeProps and
stylex props, ensuring generated data-shape and data-size attributes remain
authoritative. Preserve the existing styling and ref behavior.
---
Nitpick comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 22-25: Add explicit React element return types to the Avatar
render callback in packages/ui/src/mosaic/components/avatar/avatar.tsx and to
the exported story functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.
🪄 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: 7bfbc4ac-2d25-45e6-9848-035dc7dcebc5

📥 Commits

Reviewing files that changed from the base of the PR and between acef8a1 and 63070cb.

📒 Files selected for processing (10)
  • .changeset/mosaic-avatar.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@vercel
vercelBottemporarily deployed to Preview – clerk-js-sandbox July 23, 2026 21:52 Inactive
coderabbitai[bot]
coderabbitaiBot reviewed Jul 23, 2026
View reviewed changes

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 124-132: Update the canRender effect in the avatar component to
reset canRender whenever delayMs changes: set it true for undefined and false
before starting a defined delay, then retain the timer cleanup and delayed
transition. Add a regression test covering switches between undefined and
delayed values, including restarting the delay after the avatar has rendered.
🪄 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: 82949fb8-5ccd-4dbd-ad24-e91f98dbbbbd

📥 Commits

Reviewing files that changed from the base of the PR and between 63070cb and 9ea8651.

📒 Files selected for processing (11)
  • .changeset/mosaic-avatar.md
  • .claude/skills/clerk-monorepo/references/setup-and-footguns.md
  • packages/swingset/CLAUDE.md
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
🚧 Files skipped from review as they are similar to previous changes (6)
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • .changeset/mosaic-avatar.md
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Comment on lines +124 to +132
const [canRender, setCanRender] = React.useState(delayMs === undefined);

React.useEffect(() => {
if (delayMs === undefined) {
return;
}
const timer = setTimeout(() => setCanRender(true), delayMs);
return () => clearTimeout(timer);
}, [delayMs]);

@coderabbitaicoderabbitaiBotJul 23, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bashset -euo pipefail
# Inspect the avatar component around the relevant code.
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.tsx
echo'--- TEST SEARCH ---'# Find tests or usages that cover delayMs / canRender behavior.
rg -n "delayMs|canRender|avatar" packages/ui/src -g '*.{test,spec}.{ts,tsx}' -g '*.{test,spec}.tsx' -g '*.{test,spec}.ts'||true

Repository: clerk/javascript

Length of output: 11894

🏁 Script executed:

#!/bin/bashset -euo pipefail
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.test.tsx

Repository: clerk/javascript

Length of output: 4099

Reset canRender when delayMs changes. Switching from a delayed fallback to undefined leaves the fallback hidden, and changing to a new delay after it has already rendered skips the delay entirely. Reset the state in the effect and add a rerender regression test.

🤖 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/mosaic/components/avatar/avatar.tsx` around lines 124 - 132,
Update the canRender effect in the avatar component to reset canRender whenever
delayMs changes: set it true for undefined and false before starting a defined
delay, then retain the timer cleanup and delayed transition. Add a regression
test covering switches between undefined and delayed values, including
restarting the delay after the avatar has rendered.

Source: Coding guidelines

@coderabbitaicoderabbitaiBot mentioned this pull request Jul 24, 2026
Closed
5 tasks
maxyinger
maxyinger approved these changes Jul 28, 2026
View reviewed changes
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.styles.ts Outdated
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx Outdated
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@alexcarpenter
refactor(ui): drive Avatar image status straight to context
f81aa94
Removes the duplicate local status state and its sync effect in
Avatar.Image; the preload effect now reports load status directly to the
root, avoiding an extra render tick before the image mounts.
@alexcarpenter
alexcarpenter enabled auto-merge (squash) July 28, 2026 19:05
@alexcarpenter
alexcarpenter merged commit 9a52bc7 into mainJul 28, 2026
52 checks passed
@alexcarpenter
alexcarpenter deleted the carp/mosaic-avatar branch July 28, 2026 19:11
@clerk-cookieclerk-cookie mentioned this pull request Jul 28, 2026
Merged
This was referenced Jul 29, 2026
Merged
Merged
Merged
@coderabbitaicoderabbitaiBot mentioned this pull request Aug 11, 2026
Merged
9 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees

No one assigned

Labels

ui

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
feat(ui): add Mosaic Avatar component by alexcarpenter · Pull Request #9230 · clerk/javascript · GitHub
Skip to content
feat(ui): add Mosaic Avatar component - #9230
Merged
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Jul 28, 2026
Merged
feat(ui): add Mosaic Avatar component#9230
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Description
Adds a new Mosaic Avatar component built with StyleX, following the Button pilot's authoring pattern.
Props:
  • shape: circle (default) | square
  • size: lg | md (default) | sm | xs
  • src / alt: renders an <img> filling the clipped box; otherwise children render as the centered fallback
Styling notes:
  • Square shape uses a fixed 6px border radius for now (does not yet map to a --cl-radius-* token).
  • Sizes drawn from the spacing scale: xs 24px, sm 32px, md 40px, lg 48px, with fallback font-size scaling per size.
  • Emits the standard public contract: cl-avatar class + data-shape / data-size attrs, overridable via consumer className/style.
Swingset
Documented at /components/avatar (stories + MDX, wired into registry.ts and DocsViewer).
Preview: https://swingset-git-carp-mosaic-avatar.clerkstage.dev/components/avatar
Checklist
  •  Changeset added (@clerk/ui minor)
  •  Unit tests (5 passing)
  • build:mosaic extracts avatar CSS
  •  ESLint clean (all @stylexjs rules)
@changeset-bot
changeset-botBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 168ae35
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch
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
vercelBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 7:04pm
swingsetReadyReadyPreview, CommentJul 28, 2026 7:04pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9230

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 168ae35
@github-actions
github-actionsBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T19:05:33.102Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 168ae35.
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
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.
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
📝 Walkthrough
Walkthrough
Adds a Mosaic Avatar compound component with StyleX styling, shape and size variants, image loading, fallback handling, ref forwarding, public exports, and tests. Swingset gains Avatar stories, MDX documentation, registry registration, and documentation route resolution. A minor changeset and repository import guidance are also included.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Possibly related PRs
  • clerk/javascript#9221: Extends the same Swingset documentation and registry wiring for a different component.
  • clerk/javascript#9252: Uses the same Swingset documentation and registry plumbing for another component.
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 28.57% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding a Mosaic Avatar component in ui.
Description check✅ PassedThe description matches the changeset, including the Avatar API, styling, docs, tests, and changeset.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/ui/src/mosaic/components/avatar/avatar.tsx (1)
22-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
Add explicit return types to exported TypeScript functions.
The Avatar render callback and exported story functions currently rely on inference. Add explicit React element return types, using a type-only ReactElement import in the stories file if needed.
  • packages/ui/src/mosaic/components/avatar/avatar.tsx#L22-L25: annotate MosaicAvatar’s return type.
  • packages/swingset/src/stories/avatar.stories.tsx#L37-L39: annotate Primary.
  • packages/swingset/src/stories/avatar.stories.tsx#L41-L49: annotate Image.
  • packages/swingset/src/stories/avatar.stories.tsx#L51-L80: annotate Sizes.
  • packages/swingset/src/stories/avatar.stories.tsx#L82-L99: annotate Shapes.
As per coding guidelines, TypeScript functions, especially public APIs, must have explicit return types.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 22 - 25,
Add explicit React element return types to the Avatar render callback in
packages/ui/src/mosaic/components/avatar/avatar.tsx and to the exported story
functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 27-35: Update the prop spread order in the Avatar component’s span
so arbitrary ...rest props are applied before the generated themeProps and
stylex props, ensuring generated data-shape and data-size attributes remain
authoritative. Preserve the existing styling and ref behavior.
---
Nitpick comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 22-25: Add explicit React element return types to the Avatar
render callback in packages/ui/src/mosaic/components/avatar/avatar.tsx and to
the exported story functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

🪄 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: 7bfbc4ac-2d25-45e6-9848-035dc7dcebc5
📥 Commits
Reviewing files that changed from the base of the PR and between acef8a1 and 63070cb.
📒 Files selected for processing (10)
  • .changeset/mosaic-avatar.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 23, 2026 21:52
Inactive

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🤖 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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 124-132: Update the canRender effect in the avatar component to
reset canRender whenever delayMs changes: set it true for undefined and false
before starting a defined delay, then retain the timer cleanup and delayed
transition. Add a regression test covering switches between undefined and
delayed values, including restarting the delay after the avatar has rendered.

🪄 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: 82949fb8-5ccd-4dbd-ad24-e91f98dbbbbd
📥 Commits
Reviewing files that changed from the base of the PR and between 63070cb and 9ea8651.
📒 Files selected for processing (11)
  • .changeset/mosaic-avatar.md
  • .claude/skills/clerk-monorepo/references/setup-and-footguns.md
  • packages/swingset/CLAUDE.md
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
🚧 Files skipped from review as they are similar to previous changes (6)
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • .changeset/mosaic-avatar.md
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx

Comment on lines

+124
 to 
+132

 const [canRender, setCanRender] = React.useState(delayMs === undefined);

 React.useEffect(() => {
 if (delayMs === undefined) {
 return;
 }
 const timer = setTimeout(() => setCanRender(true), delayMs);
 return () => clearTimeout(timer);
 }, [delayMs]);
@coderabbitaicoderabbitaiBotJul 23, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Inspect the avatar component around the relevant code.
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.tsx
echo'--- TEST SEARCH ---'# Find tests or usages that cover delayMs / canRender behavior.
rg -n "delayMs|canRender|avatar" packages/ui/src -g '*.{test,spec}.{ts,tsx}' -g '*.{test,spec}.tsx' -g '*.{test,spec}.ts'||true
Repository: clerk/javascript
Length of output: 11894
🏁 Script executed:
#!/bin/bashset -euo pipefail
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.test.tsx
Repository: clerk/javascript
Length of output: 4099
Reset canRender when delayMs changes. Switching from a delayed fallback to undefined leaves the fallback hidden, and changing to a new delay after it has already rendered skips the delay entirely. Reset the state in the effect and add a rerender regression test.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 124 - 132,
Update the canRender effect in the avatar component to reset canRender whenever
delayMs changes: set it true for undefined and false before starting a defined
delay, then retain the timer cleanup and delayed transition. Add a regression
test covering switches between undefined and delayed values, including
restarting the delay after the avatar has rendered.

Source: Coding guidelines
@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 24, 2026
 Closed

5 tasks
maxyinger
maxyinger
approved these changes
Jul 28, 2026
View reviewed changes
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.styles.ts
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@alexcarpenter
refactor(ui): drive Avatar image status straight to context
f81aa94
Removes the duplicate local status state and its sync effect in
Avatar.Image; the preload effect now reports load status directly to the
root, avoiding an extra render tick before the image mounts.
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
July 28, 2026 19:05
@alexcarpenter
alexcarpenter
merged commit 9a52bc7
into
mainJul 28, 2026

52 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-avatar

branch
July 28, 2026 19:11
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 28, 2026
 Merged


This was referenced Jul 29, 2026
 Merged

 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Aug 11, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(ui): add Mosaic Avatar component by alexcarpenter · Pull Request #9230 · clerk/javascript · GitHub
Skip to content
feat(ui): add Mosaic Avatar component - #9230
Merged
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Jul 28, 2026
Merged
feat(ui): add Mosaic Avatar component#9230
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Description
Adds a new Mosaic Avatar component built with StyleX, following the Button pilot's authoring pattern.
Props:
  • shape: circle (default) | square
  • size: lg | md (default) | sm | xs
  • src / alt: renders an <img> filling the clipped box; otherwise children render as the centered fallback
Styling notes:
  • Square shape uses a fixed 6px border radius for now (does not yet map to a --cl-radius-* token).
  • Sizes drawn from the spacing scale: xs 24px, sm 32px, md 40px, lg 48px, with fallback font-size scaling per size.
  • Emits the standard public contract: cl-avatar class + data-shape / data-size attrs, overridable via consumer className/style.
Swingset
Documented at /components/avatar (stories + MDX, wired into registry.ts and DocsViewer).
Preview: https://swingset-git-carp-mosaic-avatar.clerkstage.dev/components/avatar
Checklist
  •  Changeset added (@clerk/ui minor)
  •  Unit tests (5 passing)
  • build:mosaic extracts avatar CSS
  •  ESLint clean (all @stylexjs rules)
@changeset-bot
changeset-botBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 168ae35
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch
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
vercelBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 7:04pm
swingsetReadyReadyPreview, CommentJul 28, 2026 7:04pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9230

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 168ae35
@github-actions
github-actionsBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T19:05:33.102Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 168ae35.
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
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.
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
📝 Walkthrough
Walkthrough
Adds a Mosaic Avatar compound component with StyleX styling, shape and size variants, image loading, fallback handling, ref forwarding, public exports, and tests. Swingset gains Avatar stories, MDX documentation, registry registration, and documentation route resolution. A minor changeset and repository import guidance are also included.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Possibly related PRs
  • clerk/javascript#9221: Extends the same Swingset documentation and registry wiring for a different component.
  • clerk/javascript#9252: Uses the same Swingset documentation and registry plumbing for another component.
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 28.57% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding a Mosaic Avatar component in ui.
Description check✅ PassedThe description matches the changeset, including the Avatar API, styling, docs, tests, and changeset.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/ui/src/mosaic/components/avatar/avatar.tsx (1)
22-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
Add explicit return types to exported TypeScript functions.
The Avatar render callback and exported story functions currently rely on inference. Add explicit React element return types, using a type-only ReactElement import in the stories file if needed.
  • packages/ui/src/mosaic/components/avatar/avatar.tsx#L22-L25: annotate MosaicAvatar’s return type.
  • packages/swingset/src/stories/avatar.stories.tsx#L37-L39: annotate Primary.
  • packages/swingset/src/stories/avatar.stories.tsx#L41-L49: annotate Image.
  • packages/swingset/src/stories/avatar.stories.tsx#L51-L80: annotate Sizes.
  • packages/swingset/src/stories/avatar.stories.tsx#L82-L99: annotate Shapes.
As per coding guidelines, TypeScript functions, especially public APIs, must have explicit return types.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 22 - 25,
Add explicit React element return types to the Avatar render callback in
packages/ui/src/mosaic/components/avatar/avatar.tsx and to the exported story
functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 27-35: Update the prop spread order in the Avatar component’s span
so arbitrary ...rest props are applied before the generated themeProps and
stylex props, ensuring generated data-shape and data-size attributes remain
authoritative. Preserve the existing styling and ref behavior.
---
Nitpick comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 22-25: Add explicit React element return types to the Avatar
render callback in packages/ui/src/mosaic/components/avatar/avatar.tsx and to
the exported story functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

🪄 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: 7bfbc4ac-2d25-45e6-9848-035dc7dcebc5
📥 Commits
Reviewing files that changed from the base of the PR and between acef8a1 and 63070cb.
📒 Files selected for processing (10)
  • .changeset/mosaic-avatar.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 23, 2026 21:52
Inactive

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🤖 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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 124-132: Update the canRender effect in the avatar component to
reset canRender whenever delayMs changes: set it true for undefined and false
before starting a defined delay, then retain the timer cleanup and delayed
transition. Add a regression test covering switches between undefined and
delayed values, including restarting the delay after the avatar has rendered.

🪄 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: 82949fb8-5ccd-4dbd-ad24-e91f98dbbbbd
📥 Commits
Reviewing files that changed from the base of the PR and between 63070cb and 9ea8651.
📒 Files selected for processing (11)
  • .changeset/mosaic-avatar.md
  • .claude/skills/clerk-monorepo/references/setup-and-footguns.md
  • packages/swingset/CLAUDE.md
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
🚧 Files skipped from review as they are similar to previous changes (6)
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • .changeset/mosaic-avatar.md
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx

Comment on lines

+124
 to 
+132

 const [canRender, setCanRender] = React.useState(delayMs === undefined);

 React.useEffect(() => {
 if (delayMs === undefined) {
 return;
 }
 const timer = setTimeout(() => setCanRender(true), delayMs);
 return () => clearTimeout(timer);
 }, [delayMs]);
@coderabbitaicoderabbitaiBotJul 23, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Inspect the avatar component around the relevant code.
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.tsx
echo'--- TEST SEARCH ---'# Find tests or usages that cover delayMs / canRender behavior.
rg -n "delayMs|canRender|avatar" packages/ui/src -g '*.{test,spec}.{ts,tsx}' -g '*.{test,spec}.tsx' -g '*.{test,spec}.ts'||true
Repository: clerk/javascript
Length of output: 11894
🏁 Script executed:
#!/bin/bashset -euo pipefail
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.test.tsx
Repository: clerk/javascript
Length of output: 4099
Reset canRender when delayMs changes. Switching from a delayed fallback to undefined leaves the fallback hidden, and changing to a new delay after it has already rendered skips the delay entirely. Reset the state in the effect and add a rerender regression test.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 124 - 132,
Update the canRender effect in the avatar component to reset canRender whenever
delayMs changes: set it true for undefined and false before starting a defined
delay, then retain the timer cleanup and delayed transition. Add a regression
test covering switches between undefined and delayed values, including
restarting the delay after the avatar has rendered.

Source: Coding guidelines
@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 24, 2026
 Closed

5 tasks
maxyinger
maxyinger
approved these changes
Jul 28, 2026
View reviewed changes
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.styles.ts
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@alexcarpenter
refactor(ui): drive Avatar image status straight to context
f81aa94
Removes the duplicate local status state and its sync effect in
Avatar.Image; the preload effect now reports load status directly to the
root, avoiding an extra render tick before the image mounts.
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
July 28, 2026 19:05
@alexcarpenter
alexcarpenter
merged commit 9a52bc7
into
mainJul 28, 2026

52 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-avatar

branch
July 28, 2026 19:11
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 28, 2026
 Merged


This was referenced Jul 29, 2026
 Merged

 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Aug 11, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(ui): add Mosaic Avatar component by alexcarpenter · Pull Request #9230 · clerk/javascript · GitHub
Skip to content
feat(ui): add Mosaic Avatar component - #9230
Merged
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Jul 28, 2026
Merged
feat(ui): add Mosaic Avatar component#9230
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Description
Adds a new Mosaic Avatar component built with StyleX, following the Button pilot's authoring pattern.
Props:
  • shape: circle (default) | square
  • size: lg | md (default) | sm | xs
  • src / alt: renders an <img> filling the clipped box; otherwise children render as the centered fallback
Styling notes:
  • Square shape uses a fixed 6px border radius for now (does not yet map to a --cl-radius-* token).
  • Sizes drawn from the spacing scale: xs 24px, sm 32px, md 40px, lg 48px, with fallback font-size scaling per size.
  • Emits the standard public contract: cl-avatar class + data-shape / data-size attrs, overridable via consumer className/style.
Swingset
Documented at /components/avatar (stories + MDX, wired into registry.ts and DocsViewer).
Preview: https://swingset-git-carp-mosaic-avatar.clerkstage.dev/components/avatar
Checklist
  •  Changeset added (@clerk/ui minor)
  •  Unit tests (5 passing)
  • build:mosaic extracts avatar CSS
  •  ESLint clean (all @stylexjs rules)
@changeset-bot
changeset-botBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 168ae35
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch
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
vercelBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 7:04pm
swingsetReadyReadyPreview, CommentJul 28, 2026 7:04pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9230

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 168ae35
@github-actions
github-actionsBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T19:05:33.102Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 168ae35.
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
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.
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
📝 Walkthrough
Walkthrough
Adds a Mosaic Avatar compound component with StyleX styling, shape and size variants, image loading, fallback handling, ref forwarding, public exports, and tests. Swingset gains Avatar stories, MDX documentation, registry registration, and documentation route resolution. A minor changeset and repository import guidance are also included.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Possibly related PRs
  • clerk/javascript#9221: Extends the same Swingset documentation and registry wiring for a different component.
  • clerk/javascript#9252: Uses the same Swingset documentation and registry plumbing for another component.
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 28.57% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding a Mosaic Avatar component in ui.
Description check✅ PassedThe description matches the changeset, including the Avatar API, styling, docs, tests, and changeset.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/ui/src/mosaic/components/avatar/avatar.tsx (1)
22-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
Add explicit return types to exported TypeScript functions.
The Avatar render callback and exported story functions currently rely on inference. Add explicit React element return types, using a type-only ReactElement import in the stories file if needed.
  • packages/ui/src/mosaic/components/avatar/avatar.tsx#L22-L25: annotate MosaicAvatar’s return type.
  • packages/swingset/src/stories/avatar.stories.tsx#L37-L39: annotate Primary.
  • packages/swingset/src/stories/avatar.stories.tsx#L41-L49: annotate Image.
  • packages/swingset/src/stories/avatar.stories.tsx#L51-L80: annotate Sizes.
  • packages/swingset/src/stories/avatar.stories.tsx#L82-L99: annotate Shapes.
As per coding guidelines, TypeScript functions, especially public APIs, must have explicit return types.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 22 - 25,
Add explicit React element return types to the Avatar render callback in
packages/ui/src/mosaic/components/avatar/avatar.tsx and to the exported story
functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 27-35: Update the prop spread order in the Avatar component’s span
so arbitrary ...rest props are applied before the generated themeProps and
stylex props, ensuring generated data-shape and data-size attributes remain
authoritative. Preserve the existing styling and ref behavior.
---
Nitpick comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 22-25: Add explicit React element return types to the Avatar
render callback in packages/ui/src/mosaic/components/avatar/avatar.tsx and to
the exported story functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

🪄 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: 7bfbc4ac-2d25-45e6-9848-035dc7dcebc5
📥 Commits
Reviewing files that changed from the base of the PR and between acef8a1 and 63070cb.
📒 Files selected for processing (10)
  • .changeset/mosaic-avatar.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 23, 2026 21:52
Inactive

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🤖 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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 124-132: Update the canRender effect in the avatar component to
reset canRender whenever delayMs changes: set it true for undefined and false
before starting a defined delay, then retain the timer cleanup and delayed
transition. Add a regression test covering switches between undefined and
delayed values, including restarting the delay after the avatar has rendered.

🪄 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: 82949fb8-5ccd-4dbd-ad24-e91f98dbbbbd
📥 Commits
Reviewing files that changed from the base of the PR and between 63070cb and 9ea8651.
📒 Files selected for processing (11)
  • .changeset/mosaic-avatar.md
  • .claude/skills/clerk-monorepo/references/setup-and-footguns.md
  • packages/swingset/CLAUDE.md
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
🚧 Files skipped from review as they are similar to previous changes (6)
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • .changeset/mosaic-avatar.md
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx

Comment on lines

+124
 to 
+132

 const [canRender, setCanRender] = React.useState(delayMs === undefined);

 React.useEffect(() => {
 if (delayMs === undefined) {
 return;
 }
 const timer = setTimeout(() => setCanRender(true), delayMs);
 return () => clearTimeout(timer);
 }, [delayMs]);
@coderabbitaicoderabbitaiBotJul 23, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Inspect the avatar component around the relevant code.
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.tsx
echo'--- TEST SEARCH ---'# Find tests or usages that cover delayMs / canRender behavior.
rg -n "delayMs|canRender|avatar" packages/ui/src -g '*.{test,spec}.{ts,tsx}' -g '*.{test,spec}.tsx' -g '*.{test,spec}.ts'||true
Repository: clerk/javascript
Length of output: 11894
🏁 Script executed:
#!/bin/bashset -euo pipefail
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.test.tsx
Repository: clerk/javascript
Length of output: 4099
Reset canRender when delayMs changes. Switching from a delayed fallback to undefined leaves the fallback hidden, and changing to a new delay after it has already rendered skips the delay entirely. Reset the state in the effect and add a rerender regression test.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 124 - 132,
Update the canRender effect in the avatar component to reset canRender whenever
delayMs changes: set it true for undefined and false before starting a defined
delay, then retain the timer cleanup and delayed transition. Add a regression
test covering switches between undefined and delayed values, including
restarting the delay after the avatar has rendered.

Source: Coding guidelines
@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 24, 2026
 Closed

5 tasks
maxyinger
maxyinger
approved these changes
Jul 28, 2026
View reviewed changes
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.styles.ts
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@alexcarpenter
refactor(ui): drive Avatar image status straight to context
f81aa94
Removes the duplicate local status state and its sync effect in
Avatar.Image; the preload effect now reports load status directly to the
root, avoiding an extra render tick before the image mounts.
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
July 28, 2026 19:05
@alexcarpenter
alexcarpenter
merged commit 9a52bc7
into
mainJul 28, 2026

52 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-avatar

branch
July 28, 2026 19:11
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 28, 2026
 Merged


This was referenced Jul 29, 2026
 Merged

 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Aug 11, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
feat(ui): add Mosaic Avatar component by alexcarpenter · Pull Request #9230 · clerk/javascript · GitHub
Skip to content
feat(ui): add Mosaic Avatar component - #9230
Merged
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Jul 28, 2026
Merged
feat(ui): add Mosaic Avatar component#9230
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Description
Adds a new Mosaic Avatar component built with StyleX, following the Button pilot's authoring pattern.
Props:
  • shape: circle (default) | square
  • size: lg | md (default) | sm | xs
  • src / alt: renders an <img> filling the clipped box; otherwise children render as the centered fallback
Styling notes:
  • Square shape uses a fixed 6px border radius for now (does not yet map to a --cl-radius-* token).
  • Sizes drawn from the spacing scale: xs 24px, sm 32px, md 40px, lg 48px, with fallback font-size scaling per size.
  • Emits the standard public contract: cl-avatar class + data-shape / data-size attrs, overridable via consumer className/style.
Swingset
Documented at /components/avatar (stories + MDX, wired into registry.ts and DocsViewer).
Preview: https://swingset-git-carp-mosaic-avatar.clerkstage.dev/components/avatar
Checklist
  •  Changeset added (@clerk/ui minor)
  •  Unit tests (5 passing)
  • build:mosaic extracts avatar CSS
  •  ESLint clean (all @stylexjs rules)
@changeset-bot
changeset-botBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 168ae35
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch
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
vercelBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 7:04pm
swingsetReadyReadyPreview, CommentJul 28, 2026 7:04pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9230

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 168ae35
@github-actions
github-actionsBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T19:05:33.102Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 168ae35.
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
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.
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
📝 Walkthrough
Walkthrough
Adds a Mosaic Avatar compound component with StyleX styling, shape and size variants, image loading, fallback handling, ref forwarding, public exports, and tests. Swingset gains Avatar stories, MDX documentation, registry registration, and documentation route resolution. A minor changeset and repository import guidance are also included.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Possibly related PRs
  • clerk/javascript#9221: Extends the same Swingset documentation and registry wiring for a different component.
  • clerk/javascript#9252: Uses the same Swingset documentation and registry plumbing for another component.
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 28.57% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding a Mosaic Avatar component in ui.
Description check✅ PassedThe description matches the changeset, including the Avatar API, styling, docs, tests, and changeset.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/ui/src/mosaic/components/avatar/avatar.tsx (1)
22-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
Add explicit return types to exported TypeScript functions.
The Avatar render callback and exported story functions currently rely on inference. Add explicit React element return types, using a type-only ReactElement import in the stories file if needed.
  • packages/ui/src/mosaic/components/avatar/avatar.tsx#L22-L25: annotate MosaicAvatar’s return type.
  • packages/swingset/src/stories/avatar.stories.tsx#L37-L39: annotate Primary.
  • packages/swingset/src/stories/avatar.stories.tsx#L41-L49: annotate Image.
  • packages/swingset/src/stories/avatar.stories.tsx#L51-L80: annotate Sizes.
  • packages/swingset/src/stories/avatar.stories.tsx#L82-L99: annotate Shapes.
As per coding guidelines, TypeScript functions, especially public APIs, must have explicit return types.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 22 - 25,
Add explicit React element return types to the Avatar render callback in
packages/ui/src/mosaic/components/avatar/avatar.tsx and to the exported story
functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 27-35: Update the prop spread order in the Avatar component’s span
so arbitrary ...rest props are applied before the generated themeProps and
stylex props, ensuring generated data-shape and data-size attributes remain
authoritative. Preserve the existing styling and ref behavior.
---
Nitpick comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 22-25: Add explicit React element return types to the Avatar
render callback in packages/ui/src/mosaic/components/avatar/avatar.tsx and to
the exported story functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

🪄 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: 7bfbc4ac-2d25-45e6-9848-035dc7dcebc5
📥 Commits
Reviewing files that changed from the base of the PR and between acef8a1 and 63070cb.
📒 Files selected for processing (10)
  • .changeset/mosaic-avatar.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 23, 2026 21:52
Inactive

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🤖 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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 124-132: Update the canRender effect in the avatar component to
reset canRender whenever delayMs changes: set it true for undefined and false
before starting a defined delay, then retain the timer cleanup and delayed
transition. Add a regression test covering switches between undefined and
delayed values, including restarting the delay after the avatar has rendered.

🪄 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: 82949fb8-5ccd-4dbd-ad24-e91f98dbbbbd
📥 Commits
Reviewing files that changed from the base of the PR and between 63070cb and 9ea8651.
📒 Files selected for processing (11)
  • .changeset/mosaic-avatar.md
  • .claude/skills/clerk-monorepo/references/setup-and-footguns.md
  • packages/swingset/CLAUDE.md
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
🚧 Files skipped from review as they are similar to previous changes (6)
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • .changeset/mosaic-avatar.md
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx

Comment on lines

+124
 to 
+132

 const [canRender, setCanRender] = React.useState(delayMs === undefined);

 React.useEffect(() => {
 if (delayMs === undefined) {
 return;
 }
 const timer = setTimeout(() => setCanRender(true), delayMs);
 return () => clearTimeout(timer);
 }, [delayMs]);
@coderabbitaicoderabbitaiBotJul 23, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Inspect the avatar component around the relevant code.
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.tsx
echo'--- TEST SEARCH ---'# Find tests or usages that cover delayMs / canRender behavior.
rg -n "delayMs|canRender|avatar" packages/ui/src -g '*.{test,spec}.{ts,tsx}' -g '*.{test,spec}.tsx' -g '*.{test,spec}.ts'||true
Repository: clerk/javascript
Length of output: 11894
🏁 Script executed:
#!/bin/bashset -euo pipefail
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.test.tsx
Repository: clerk/javascript
Length of output: 4099
Reset canRender when delayMs changes. Switching from a delayed fallback to undefined leaves the fallback hidden, and changing to a new delay after it has already rendered skips the delay entirely. Reset the state in the effect and add a rerender regression test.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 124 - 132,
Update the canRender effect in the avatar component to reset canRender whenever
delayMs changes: set it true for undefined and false before starting a defined
delay, then retain the timer cleanup and delayed transition. Add a regression
test covering switches between undefined and delayed values, including
restarting the delay after the avatar has rendered.

Source: Coding guidelines
@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 24, 2026
 Closed

5 tasks
maxyinger
maxyinger
approved these changes
Jul 28, 2026
View reviewed changes
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.styles.ts
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@alexcarpenter
refactor(ui): drive Avatar image status straight to context
f81aa94
Removes the duplicate local status state and its sync effect in
Avatar.Image; the preload effect now reports load status directly to the
root, avoiding an extra render tick before the image mounts.
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
July 28, 2026 19:05
@alexcarpenter
alexcarpenter
merged commit 9a52bc7
into
mainJul 28, 2026

52 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-avatar

branch
July 28, 2026 19:11
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 28, 2026
 Merged


This was referenced Jul 29, 2026
 Merged

 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Aug 11, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(ui): add Mosaic Avatar component by alexcarpenter · Pull Request #9230 · clerk/javascript · GitHub
Skip to content
feat(ui): add Mosaic Avatar component - #9230
Merged
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Jul 28, 2026
Merged
feat(ui): add Mosaic Avatar component#9230
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Description
Adds a new Mosaic Avatar component built with StyleX, following the Button pilot's authoring pattern.
Props:
  • shape: circle (default) | square
  • size: lg | md (default) | sm | xs
  • src / alt: renders an <img> filling the clipped box; otherwise children render as the centered fallback
Styling notes:
  • Square shape uses a fixed 6px border radius for now (does not yet map to a --cl-radius-* token).
  • Sizes drawn from the spacing scale: xs 24px, sm 32px, md 40px, lg 48px, with fallback font-size scaling per size.
  • Emits the standard public contract: cl-avatar class + data-shape / data-size attrs, overridable via consumer className/style.
Swingset
Documented at /components/avatar (stories + MDX, wired into registry.ts and DocsViewer).
Preview: https://swingset-git-carp-mosaic-avatar.clerkstage.dev/components/avatar
Checklist
  •  Changeset added (@clerk/ui minor)
  •  Unit tests (5 passing)
  • build:mosaic extracts avatar CSS
  •  ESLint clean (all @stylexjs rules)
@changeset-bot
changeset-botBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 168ae35
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch
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
vercelBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 7:04pm
swingsetReadyReadyPreview, CommentJul 28, 2026 7:04pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9230

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 168ae35
@github-actions
github-actionsBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T19:05:33.102Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 168ae35.
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
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.
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
📝 Walkthrough
Walkthrough
Adds a Mosaic Avatar compound component with StyleX styling, shape and size variants, image loading, fallback handling, ref forwarding, public exports, and tests. Swingset gains Avatar stories, MDX documentation, registry registration, and documentation route resolution. A minor changeset and repository import guidance are also included.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Possibly related PRs
  • clerk/javascript#9221: Extends the same Swingset documentation and registry wiring for a different component.
  • clerk/javascript#9252: Uses the same Swingset documentation and registry plumbing for another component.
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 28.57% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding a Mosaic Avatar component in ui.
Description check✅ PassedThe description matches the changeset, including the Avatar API, styling, docs, tests, and changeset.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/ui/src/mosaic/components/avatar/avatar.tsx (1)
22-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
Add explicit return types to exported TypeScript functions.
The Avatar render callback and exported story functions currently rely on inference. Add explicit React element return types, using a type-only ReactElement import in the stories file if needed.
  • packages/ui/src/mosaic/components/avatar/avatar.tsx#L22-L25: annotate MosaicAvatar’s return type.
  • packages/swingset/src/stories/avatar.stories.tsx#L37-L39: annotate Primary.
  • packages/swingset/src/stories/avatar.stories.tsx#L41-L49: annotate Image.
  • packages/swingset/src/stories/avatar.stories.tsx#L51-L80: annotate Sizes.
  • packages/swingset/src/stories/avatar.stories.tsx#L82-L99: annotate Shapes.
As per coding guidelines, TypeScript functions, especially public APIs, must have explicit return types.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 22 - 25,
Add explicit React element return types to the Avatar render callback in
packages/ui/src/mosaic/components/avatar/avatar.tsx and to the exported story
functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 27-35: Update the prop spread order in the Avatar component’s span
so arbitrary ...rest props are applied before the generated themeProps and
stylex props, ensuring generated data-shape and data-size attributes remain
authoritative. Preserve the existing styling and ref behavior.
---
Nitpick comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 22-25: Add explicit React element return types to the Avatar
render callback in packages/ui/src/mosaic/components/avatar/avatar.tsx and to
the exported story functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

🪄 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: 7bfbc4ac-2d25-45e6-9848-035dc7dcebc5
📥 Commits
Reviewing files that changed from the base of the PR and between acef8a1 and 63070cb.
📒 Files selected for processing (10)
  • .changeset/mosaic-avatar.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 23, 2026 21:52
Inactive

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🤖 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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 124-132: Update the canRender effect in the avatar component to
reset canRender whenever delayMs changes: set it true for undefined and false
before starting a defined delay, then retain the timer cleanup and delayed
transition. Add a regression test covering switches between undefined and
delayed values, including restarting the delay after the avatar has rendered.

🪄 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: 82949fb8-5ccd-4dbd-ad24-e91f98dbbbbd
📥 Commits
Reviewing files that changed from the base of the PR and between 63070cb and 9ea8651.
📒 Files selected for processing (11)
  • .changeset/mosaic-avatar.md
  • .claude/skills/clerk-monorepo/references/setup-and-footguns.md
  • packages/swingset/CLAUDE.md
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
🚧 Files skipped from review as they are similar to previous changes (6)
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • .changeset/mosaic-avatar.md
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx

Comment on lines

+124
 to 
+132

 const [canRender, setCanRender] = React.useState(delayMs === undefined);

 React.useEffect(() => {
 if (delayMs === undefined) {
 return;
 }
 const timer = setTimeout(() => setCanRender(true), delayMs);
 return () => clearTimeout(timer);
 }, [delayMs]);
@coderabbitaicoderabbitaiBotJul 23, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Inspect the avatar component around the relevant code.
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.tsx
echo'--- TEST SEARCH ---'# Find tests or usages that cover delayMs / canRender behavior.
rg -n "delayMs|canRender|avatar" packages/ui/src -g '*.{test,spec}.{ts,tsx}' -g '*.{test,spec}.tsx' -g '*.{test,spec}.ts'||true
Repository: clerk/javascript
Length of output: 11894
🏁 Script executed:
#!/bin/bashset -euo pipefail
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.test.tsx
Repository: clerk/javascript
Length of output: 4099
Reset canRender when delayMs changes. Switching from a delayed fallback to undefined leaves the fallback hidden, and changing to a new delay after it has already rendered skips the delay entirely. Reset the state in the effect and add a rerender regression test.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 124 - 132,
Update the canRender effect in the avatar component to reset canRender whenever
delayMs changes: set it true for undefined and false before starting a defined
delay, then retain the timer cleanup and delayed transition. Add a regression
test covering switches between undefined and delayed values, including
restarting the delay after the avatar has rendered.

Source: Coding guidelines
@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 24, 2026
 Closed

5 tasks
maxyinger
maxyinger
approved these changes
Jul 28, 2026
View reviewed changes
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.styles.ts
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@alexcarpenter
refactor(ui): drive Avatar image status straight to context
f81aa94
Removes the duplicate local status state and its sync effect in
Avatar.Image; the preload effect now reports load status directly to the
root, avoiding an extra render tick before the image mounts.
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
July 28, 2026 19:05
@alexcarpenter
alexcarpenter
merged commit 9a52bc7
into
mainJul 28, 2026

52 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-avatar

branch
July 28, 2026 19:11
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 28, 2026
 Merged


This was referenced Jul 29, 2026
 Merged

 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Aug 11, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(ui): add Mosaic Avatar component by alexcarpenter · Pull Request #9230 · clerk/javascript · GitHub
Skip to content
feat(ui): add Mosaic Avatar component - #9230
Merged
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Jul 28, 2026
Merged
feat(ui): add Mosaic Avatar component#9230
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Description
Adds a new Mosaic Avatar component built with StyleX, following the Button pilot's authoring pattern.
Props:
  • shape: circle (default) | square
  • size: lg | md (default) | sm | xs
  • src / alt: renders an <img> filling the clipped box; otherwise children render as the centered fallback
Styling notes:
  • Square shape uses a fixed 6px border radius for now (does not yet map to a --cl-radius-* token).
  • Sizes drawn from the spacing scale: xs 24px, sm 32px, md 40px, lg 48px, with fallback font-size scaling per size.
  • Emits the standard public contract: cl-avatar class + data-shape / data-size attrs, overridable via consumer className/style.
Swingset
Documented at /components/avatar (stories + MDX, wired into registry.ts and DocsViewer).
Preview: https://swingset-git-carp-mosaic-avatar.clerkstage.dev/components/avatar
Checklist
  •  Changeset added (@clerk/ui minor)
  •  Unit tests (5 passing)
  • build:mosaic extracts avatar CSS
  •  ESLint clean (all @stylexjs rules)
@changeset-bot
changeset-botBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 168ae35
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch
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
vercelBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 7:04pm
swingsetReadyReadyPreview, CommentJul 28, 2026 7:04pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9230

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 168ae35
@github-actions
github-actionsBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T19:05:33.102Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 168ae35.
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
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.
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
📝 Walkthrough
Walkthrough
Adds a Mosaic Avatar compound component with StyleX styling, shape and size variants, image loading, fallback handling, ref forwarding, public exports, and tests. Swingset gains Avatar stories, MDX documentation, registry registration, and documentation route resolution. A minor changeset and repository import guidance are also included.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Possibly related PRs
  • clerk/javascript#9221: Extends the same Swingset documentation and registry wiring for a different component.
  • clerk/javascript#9252: Uses the same Swingset documentation and registry plumbing for another component.
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 28.57% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding a Mosaic Avatar component in ui.
Description check✅ PassedThe description matches the changeset, including the Avatar API, styling, docs, tests, and changeset.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/ui/src/mosaic/components/avatar/avatar.tsx (1)
22-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
Add explicit return types to exported TypeScript functions.
The Avatar render callback and exported story functions currently rely on inference. Add explicit React element return types, using a type-only ReactElement import in the stories file if needed.
  • packages/ui/src/mosaic/components/avatar/avatar.tsx#L22-L25: annotate MosaicAvatar’s return type.
  • packages/swingset/src/stories/avatar.stories.tsx#L37-L39: annotate Primary.
  • packages/swingset/src/stories/avatar.stories.tsx#L41-L49: annotate Image.
  • packages/swingset/src/stories/avatar.stories.tsx#L51-L80: annotate Sizes.
  • packages/swingset/src/stories/avatar.stories.tsx#L82-L99: annotate Shapes.
As per coding guidelines, TypeScript functions, especially public APIs, must have explicit return types.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 22 - 25,
Add explicit React element return types to the Avatar render callback in
packages/ui/src/mosaic/components/avatar/avatar.tsx and to the exported story
functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 27-35: Update the prop spread order in the Avatar component’s span
so arbitrary ...rest props are applied before the generated themeProps and
stylex props, ensuring generated data-shape and data-size attributes remain
authoritative. Preserve the existing styling and ref behavior.
---
Nitpick comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 22-25: Add explicit React element return types to the Avatar
render callback in packages/ui/src/mosaic/components/avatar/avatar.tsx and to
the exported story functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

🪄 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: 7bfbc4ac-2d25-45e6-9848-035dc7dcebc5
📥 Commits
Reviewing files that changed from the base of the PR and between acef8a1 and 63070cb.
📒 Files selected for processing (10)
  • .changeset/mosaic-avatar.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 23, 2026 21:52
Inactive

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🤖 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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 124-132: Update the canRender effect in the avatar component to
reset canRender whenever delayMs changes: set it true for undefined and false
before starting a defined delay, then retain the timer cleanup and delayed
transition. Add a regression test covering switches between undefined and
delayed values, including restarting the delay after the avatar has rendered.

🪄 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: 82949fb8-5ccd-4dbd-ad24-e91f98dbbbbd
📥 Commits
Reviewing files that changed from the base of the PR and between 63070cb and 9ea8651.
📒 Files selected for processing (11)
  • .changeset/mosaic-avatar.md
  • .claude/skills/clerk-monorepo/references/setup-and-footguns.md
  • packages/swingset/CLAUDE.md
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
🚧 Files skipped from review as they are similar to previous changes (6)
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • .changeset/mosaic-avatar.md
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx

Comment on lines

+124
 to 
+132

 const [canRender, setCanRender] = React.useState(delayMs === undefined);

 React.useEffect(() => {
 if (delayMs === undefined) {
 return;
 }
 const timer = setTimeout(() => setCanRender(true), delayMs);
 return () => clearTimeout(timer);
 }, [delayMs]);
@coderabbitaicoderabbitaiBotJul 23, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Inspect the avatar component around the relevant code.
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.tsx
echo'--- TEST SEARCH ---'# Find tests or usages that cover delayMs / canRender behavior.
rg -n "delayMs|canRender|avatar" packages/ui/src -g '*.{test,spec}.{ts,tsx}' -g '*.{test,spec}.tsx' -g '*.{test,spec}.ts'||true
Repository: clerk/javascript
Length of output: 11894
🏁 Script executed:
#!/bin/bashset -euo pipefail
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.test.tsx
Repository: clerk/javascript
Length of output: 4099
Reset canRender when delayMs changes. Switching from a delayed fallback to undefined leaves the fallback hidden, and changing to a new delay after it has already rendered skips the delay entirely. Reset the state in the effect and add a rerender regression test.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 124 - 132,
Update the canRender effect in the avatar component to reset canRender whenever
delayMs changes: set it true for undefined and false before starting a defined
delay, then retain the timer cleanup and delayed transition. Add a regression
test covering switches between undefined and delayed values, including
restarting the delay after the avatar has rendered.

Source: Coding guidelines
@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 24, 2026
 Closed

5 tasks
maxyinger
maxyinger
approved these changes
Jul 28, 2026
View reviewed changes
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.styles.ts
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@alexcarpenter
refactor(ui): drive Avatar image status straight to context
f81aa94
Removes the duplicate local status state and its sync effect in
Avatar.Image; the preload effect now reports load status directly to the
root, avoiding an extra render tick before the image mounts.
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
July 28, 2026 19:05
@alexcarpenter
alexcarpenter
merged commit 9a52bc7
into
mainJul 28, 2026

52 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-avatar

branch
July 28, 2026 19:11
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 28, 2026
 Merged


This was referenced Jul 29, 2026
 Merged

 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Aug 11, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
feat(ui): add Mosaic Avatar component by alexcarpenter · Pull Request #9230 · clerk/javascript · GitHub
Skip to content
feat(ui): add Mosaic Avatar component - #9230
Merged
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Jul 28, 2026
Merged
feat(ui): add Mosaic Avatar component#9230
alexcarpenter merged 12 commits into
mainfrom 
carp/mosaic-avatar
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Description
Adds a new Mosaic Avatar component built with StyleX, following the Button pilot's authoring pattern.
Props:
  • shape: circle (default) | square
  • size: lg | md (default) | sm | xs
  • src / alt: renders an <img> filling the clipped box; otherwise children render as the centered fallback
Styling notes:
  • Square shape uses a fixed 6px border radius for now (does not yet map to a --cl-radius-* token).
  • Sizes drawn from the spacing scale: xs 24px, sm 32px, md 40px, lg 48px, with fallback font-size scaling per size.
  • Emits the standard public contract: cl-avatar class + data-shape / data-size attrs, overridable via consumer className/style.
Swingset
Documented at /components/avatar (stories + MDX, wired into registry.ts and DocsViewer).
Preview: https://swingset-git-carp-mosaic-avatar.clerkstage.dev/components/avatar
Checklist
  •  Changeset added (@clerk/ui minor)
  •  Unit tests (5 passing)
  • build:mosaic extracts avatar CSS
  •  ESLint clean (all @stylexjs rules)
@changeset-bot
changeset-botBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 168ae35
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch
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
vercelBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 7:04pm
swingsetReadyReadyPreview, CommentJul 28, 2026 7:04pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9230

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 168ae35
@github-actions
github-actionsBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T19:05:33.102Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 168ae35.
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
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.
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
📝 Walkthrough
Walkthrough
Adds a Mosaic Avatar compound component with StyleX styling, shape and size variants, image loading, fallback handling, ref forwarding, public exports, and tests. Swingset gains Avatar stories, MDX documentation, registry registration, and documentation route resolution. A minor changeset and repository import guidance are also included.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Possibly related PRs
  • clerk/javascript#9221: Extends the same Swingset documentation and registry wiring for a different component.
  • clerk/javascript#9252: Uses the same Swingset documentation and registry plumbing for another component.
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 28.57% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding a Mosaic Avatar component in ui.
Description check✅ PassedThe description matches the changeset, including the Avatar API, styling, docs, tests, and changeset.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/ui/src/mosaic/components/avatar/avatar.tsx (1)
22-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
Add explicit return types to exported TypeScript functions.
The Avatar render callback and exported story functions currently rely on inference. Add explicit React element return types, using a type-only ReactElement import in the stories file if needed.
  • packages/ui/src/mosaic/components/avatar/avatar.tsx#L22-L25: annotate MosaicAvatar’s return type.
  • packages/swingset/src/stories/avatar.stories.tsx#L37-L39: annotate Primary.
  • packages/swingset/src/stories/avatar.stories.tsx#L41-L49: annotate Image.
  • packages/swingset/src/stories/avatar.stories.tsx#L51-L80: annotate Sizes.
  • packages/swingset/src/stories/avatar.stories.tsx#L82-L99: annotate Shapes.
As per coding guidelines, TypeScript functions, especially public APIs, must have explicit return types.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 22 - 25,
Add explicit React element return types to the Avatar render callback in
packages/ui/src/mosaic/components/avatar/avatar.tsx and to the exported story
functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 27-35: Update the prop spread order in the Avatar component’s span
so arbitrary ...rest props are applied before the generated themeProps and
stylex props, ensuring generated data-shape and data-size attributes remain
authoritative. Preserve the existing styling and ref behavior.
---
Nitpick comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 22-25: Add explicit React element return types to the Avatar
render callback in packages/ui/src/mosaic/components/avatar/avatar.tsx and to
the exported story functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.

🪄 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: 7bfbc4ac-2d25-45e6-9848-035dc7dcebc5
📥 Commits
Reviewing files that changed from the base of the PR and between acef8a1 and 63070cb.
📒 Files selected for processing (10)
  • .changeset/mosaic-avatar.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 23, 2026 21:52
Inactive

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1
🤖 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 `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 124-132: Update the canRender effect in the avatar component to
reset canRender whenever delayMs changes: set it true for undefined and false
before starting a defined delay, then retain the timer cleanup and delayed
transition. Add a regression test covering switches between undefined and
delayed values, including restarting the delay after the avatar has rendered.

🪄 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: 82949fb8-5ccd-4dbd-ad24-e91f98dbbbbd
📥 Commits
Reviewing files that changed from the base of the PR and between 63070cb and 9ea8651.
📒 Files selected for processing (11)
  • .changeset/mosaic-avatar.md
  • .claude/skills/clerk-monorepo/references/setup-and-footguns.md
  • packages/swingset/CLAUDE.md
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.test.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
🔗 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/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
🚧 Files skipped from review as they are similar to previous changes (6)
  • packages/ui/src/mosaic/components/avatar/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • .changeset/mosaic-avatar.md
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/avatar.mdx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx

Comment on lines

+124
 to 
+132

 const [canRender, setCanRender] = React.useState(delayMs === undefined);

 React.useEffect(() => {
 if (delayMs === undefined) {
 return;
 }
 const timer = setTimeout(() => setCanRender(true), delayMs);
 return () => clearTimeout(timer);
 }, [delayMs]);
@coderabbitaicoderabbitaiBotJul 23, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bashset -euo pipefail
# Inspect the avatar component around the relevant code.
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.tsx
echo'--- TEST SEARCH ---'# Find tests or usages that cover delayMs / canRender behavior.
rg -n "delayMs|canRender|avatar" packages/ui/src -g '*.{test,spec}.{ts,tsx}' -g '*.{test,spec}.tsx' -g '*.{test,spec}.ts'||true
Repository: clerk/javascript
Length of output: 11894
🏁 Script executed:
#!/bin/bashset -euo pipefail
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.test.tsx
Repository: clerk/javascript
Length of output: 4099
Reset canRender when delayMs changes. Switching from a delayed fallback to undefined leaves the fallback hidden, and changing to a new delay after it has already rendered skips the delay entirely. Reset the state in the effect and add a rerender regression test.
🤖 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/mosaic/components/avatar/avatar.tsx` around lines 124 - 132,
Update the canRender effect in the avatar component to reset canRender whenever
delayMs changes: set it true for undefined and false before starting a defined
delay, then retain the timer cleanup and delayed transition. Add a regression
test covering switches between undefined and delayed values, including
restarting the delay after the avatar has rendered.

Source: Coding guidelines
@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 24, 2026
 Closed

5 tasks
maxyinger
maxyinger
approved these changes
Jul 28, 2026
View reviewed changes
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.styles.ts
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
Outdated

Comment threadpackages/ui/src/mosaic/components/avatar/avatar.tsx
@alexcarpenter
refactor(ui): drive Avatar image status straight to context
f81aa94
Removes the duplicate local status state and its sync effect in
Avatar.Image; the preload effect now reports load status directly to the
root, avoiding an extra render tick before the image mounts.
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
July 28, 2026 19:05
@alexcarpenter
alexcarpenter
merged commit 9a52bc7
into
mainJul 28, 2026

52 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-avatar

branch
July 28, 2026 19:11
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 28, 2026
 Merged


This was referenced Jul 29, 2026
 Merged

 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Aug 11, 2026
 Merged

9 tasks
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger