[alexcarpenter]

Description

Adds Card.Media, a slot at the top of Card.Header for a logo, icon or image, with 24px of space below it. It holds any content, so flows like OAuth consent can show two connected logos.

• The header's 2px row gap is subtracted from the margin, so the space below the media is 24px rather than 26px. It scales with --cl-spacing.
• The OAuth consent layout is a Swingset story only. The connector and centering are not part of Card.Media.

This adds a new part, so there is no before state.

Media	OAuth consent story

Checklist

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

Type of change

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

[vercel]

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

Project	Deployment	Actions	Updated
clerk-js-sandbox	Ready	Preview	Nov 2, 2026 11:45pm UTC
swingset	Ready	Preview	Nov 2, 2026 11:45pm UTC

[changeset-bot]

🦋 Changeset detected

Latest commit: 6abc38d

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/mosaic	Patch
@clerk/swingset	Patch

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

[coderabbitai]

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

Run configuration

• Source mode: Auto
• Repository: clerk/javascript
• Branch: carp/mosaic-card-media
• File: .coderabbit.yaml
• Commit: 6abc38d
• Layers: Repository YAML (base), Organization UI (inherited)
• Review profile: ASSERTIVE
• Plan: Team
• Run ID: bb78c131-8c8d-4196-a6f2-619d6251d7cc

Commits

Reviewing files that changed from the base of the PR and between 79dd87f and 6abc38d.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• Trigger review

Recent review info

Run configuration

• Source mode: Auto
• Repository: clerk/javascript
• Branch: carp/mosaic-card-media
• File: .coderabbit.yaml
• Commit: 79dd87f
• Layers: Repository YAML (base), Organization UI (inherited)
• Review profile: ASSERTIVE
• Plan: Team
• Run ID: a0f3e15f-2d50-4574-b609-a0386c3f50e5

Commits

Reviewing files that changed from the base of the PR and between 7b3eccb and 79dd87f.

Files selected for processing: 8

• .changeset/mosaic-card-media.md
• packages/mosaic/src/components/card/card.browser.test.tsx
• packages/mosaic/src/components/card/card.styles.ts
• packages/mosaic/src/components/card/card.test.tsx
• packages/mosaic/src/components/card/card.tsx
• packages/mosaic/src/components/card/index.ts
• packages/swingset/src/stories/card.component.mdx
• packages/swingset/src/stories/card.component.stories.tsx

Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

• clerk/clerk_go (manual)
• clerk/dashboard (manual)
• clerk/accounts (manual)
• clerk/backoffice (manual)
• clerk/clerk (manual)
• clerk/clerk-docs (manual)
• clerk/cloudflare-workers (manual)
• clerk/clerk-android (auto-detected)
• clerk/cli (auto-detected)
• clerk/clerk-ios (auto-detected)

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 0 remain after this review.

Walkthrough

Adds Card.Media to the Card composition as a media slot above the header title. The slot uses .cl-card-media styling and layout that provides 24px of space below it. Card.Header gains an align prop that defaults to start and supports centered content, including in dialogs with a close button. Tests cover rendering, custom elements, refs, styles, spacing, and alignment. Documentation and stories show the slot in invitation and OAuth consent cards.

Estimated code review effort: 2 (Simple) | ~15 minutes

Possibly related PRs

• clerk/javascript#10077: Adds Card.Image and header alignment for auth cards, overlapping with this change’s Card.Header media placement and layout.

Suggested reviewers: maxyinger

Merge Risk: Low · previous review 79dd8

The test TypeScript project may fail, and copied examples lack required definitions. These are bounded issues suitable for follow-up.

Pre-merge checks: 5

Check name	Status	Explanation
Title check		The title clearly identifies the main change: adding the new Card.Media slot to Mosaic.
Description check		The description directly explains Card.Media, its spacing, related header behavior, and the OAuth consent story.
Docstring Coverage		No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 6 files. (2 skipped: 2 unsupported.)

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

Warning

Linked repositories: Some configured repositories could not be included in this review. Cross-repository analysis may be incomplete. Please check linked-repository access and settings.

CodeRabbit Verify

• Run CodeRabbit Verify to test the changes in this pull request.

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-biometrics

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

@clerk/expo-google-signin

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

@clerk/expo-native-components

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/mosaic

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 6abc38d

[coderabbitai]

• Fix comments: Fix CodeRabbit comments on this PR

[coderabbitai]

• Fix comments: Fix CodeRabbit comments on this PR