Skip to content

chore(ui): Update NavBar to receive containerSx prop - #8568

Merged
LauraBeatris merged 2 commits into
mainfrom
laura/update-sidebar-layout-order
May 18, 2026
Merged

chore(ui): Update NavBar to receive containerSx prop#8568
LauraBeatris merged 2 commits into
mainfrom
laura/update-sidebar-layout-order

Conversation

@LauraBeatris

@LauraBeatrisLauraBeatris commented May 16, 2026

Copy link
Copy Markdown
Contributor

Description

image

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:

@LauraBeatrisLauraBeatris self-assigned this May 16, 2026
@changeset-bot

changeset-botBot commented May 16, 2026•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 83be304

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

This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch

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 May 16, 2026•
edited
Loading

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 18, 2026 3:09pm

Request Review

@LauraBeatris
LauraBeatris changed the base branch from main to laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-stepMay 16, 2026 10:05
@LauraBeatris
LauraBeatris marked this pull request as ready for review May 16, 2026 10:05
@LauraBeatrisLauraBeatris changed the title Update NavBar flex order by forwarding sx prop chore(ui): Update NavBar to receive containerSx prop May 16, 2026
@LauraBeatrisLauraBeatris changed the title chore(ui): Update NavBar to receive containerSx prop chore(ui): Update NavBar to receive containerSx propMay 16, 2026
@LauraBeatris
LauraBeatrisforce-pushed the laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step branch 3 times, most recently from c3e36bb to 25820ffCompareMay 16, 2026 21:26
@LauraBeatris
LauraBeatrisforce-pushed the laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step branch 3 times, most recently from b3dd719 to c647566CompareMay 18, 2026 14:48
Base automatically changed from laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step to mainMay 18, 2026 15:00
@LauraBeatris
LauraBeatrisforce-pushed the laura/update-sidebar-layout-order branch from 3d9b478 to f6f5dd0CompareMay 18, 2026 15:07
@coderabbitai

coderabbitaiBot commented May 18, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: b2e3cf74-8b9c-4f1f-bc6a-b1fd7004d59c

📥 Commits

Reviewing files that changed from the base of the PR and between 4fc38a0 and 83be304.

📒 Files selected for processing (3)
  • .changeset/thirty-jeans-live.md
  • packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
  • packages/ui/src/elements/Navbar.tsx
📝 Walkthrough

Walkthrough

This PR extends the NavBar component with an optional containerSx prop that allows consuming components to customize the navbar container's flex layout. The prop is threaded from NavBar through NavbarContainer, where it is merged with default styles via an sx array. The NavBar component's items rendering is also refactored to conditionally render the routes button column only when routes exist. ConfigureSSONavbar demonstrates the feature by applying column-reverse stacking with flex constraints.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main change: adding a containerSx prop to the NavBar component, which aligns with all file modifications in the changeset.
Description check✅ PassedThe description relates to the changeset by including an image of the SSO configuration UI that uses the updated NavBar layout, and confirms tests and builds pass.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

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

@pkg-pr-new

pkg-pr-newBot commented May 18, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8568

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 83be304

@LauraBeatris
LauraBeatris merged commit 3987851 into mainMay 18, 2026
43 checks passed
@LauraBeatris
LauraBeatris deleted the laura/update-sidebar-layout-order branch May 18, 2026 15:40
@clerk-cookieclerk-cookie mentioned this pull request May 18, 2026
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

localizationsui

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@alexcarpenter
, '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" + '
chore(ui): Update `NavBar` to receive `containerSx` prop by LauraBeatris · Pull Request #8568 · clerk/javascript · GitHub
Skip to content
chore(ui): Update NavBar to receive containerSx prop - #8568
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/update-sidebar-layout-order
May 18, 2026
Merged
chore(ui): Update NavBar to receive containerSx prop#8568
LauraBeatris merged 2 commits into
mainfrom 
laura/update-sidebar-layout-order
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
May 16, 2026

Copy link


Copy Markdown

Contributor
Description
image
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:
@LauraBeatrisLauraBeatris
self-assigned this
May 16, 2026
@changeset-bot
changeset-botBot
commented
May 16, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 83be304
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
May 16, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 18, 2026 3:09pm
Request Review
@LauraBeatris
LauraBeatris
changed the base branch from
main
to
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-stepMay 16, 2026 10:05
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
May 16, 2026 10:05
@LauraBeatrisLauraBeatris
changed the title
Update NavBar flex order by forwarding sx prop chore(ui): Update NavBar to receive containerSx prop May 16, 2026
@LauraBeatrisLauraBeatris
changed the title
chore(ui): Update NavBar to receive containerSx prop chore(ui): Update NavBar to receive containerSx propMay 16, 2026
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step
branch
3 times, most recently
from
c3e36bb to
25820ffCompareMay 16, 2026 21:26
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step
branch
3 times, most recently
from
b3dd719 to
c647566CompareMay 18, 2026 14:48

Base automatically changed from
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step to
mainMay 18, 2026 15:00
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/update-sidebar-layout-order
branch
from
3d9b478 to
f6f5dd0CompareMay 18, 2026 15:07
@coderabbitai
coderabbitaiBot
commented
May 18, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
No actionable comments were generated in the recent review. 🎉
ℹ️ Recent review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: b2e3cf74-8b9c-4f1f-bc6a-b1fd7004d59c
📥 Commits
Reviewing files that changed from the base of the PR and between 4fc38a0 and 83be304.
📒 Files selected for processing (3)
  • .changeset/thirty-jeans-live.md
  • packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
  • packages/ui/src/elements/Navbar.tsx
📝 Walkthrough
Walkthrough
This PR extends the NavBar component with an optional containerSx prop that allows consuming components to customize the navbar container's flex layout. The prop is threaded from NavBar through NavbarContainer, where it is merged with default styles via an sx array. The NavBar component's items rendering is also refactored to conditionally render the routes button column only when routes exist. ConfigureSSONavbar demonstrates the feature by applying column-reverse stacking with flex constraints.
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~12 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main change: adding a containerSx prop to the NavBar component, which aligns with all file modifications in the changeset.
Description check✅ PassedThe description relates to the changeset by including an image of the SSO configuration UI that uses the updated NavBar layout, and confirms tests and builds pass.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
May 18, 2026

Copy link


Copy Markdown

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

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

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

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

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@8568

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 83be304
@LauraBeatris
LauraBeatris
merged commit 3987851
into
mainMay 18, 2026

43 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/update-sidebar-layout-order

branch
May 18, 2026 15:40
@clerk-cookieclerk-cookie
mentioned this pull request
May 18, 2026
 Merged

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

Reviewers

@alexcarpenteralexcarpenteralexcarpenter approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@alexcarpenter

, '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('^' + ".*" + '
chore(ui): Update `NavBar` to receive `containerSx` prop by LauraBeatris · Pull Request #8568 · clerk/javascript · GitHub
Skip to content
chore(ui): Update NavBar to receive containerSx prop - #8568
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/update-sidebar-layout-order
May 18, 2026
Merged
chore(ui): Update NavBar to receive containerSx prop#8568
LauraBeatris merged 2 commits into
mainfrom 
laura/update-sidebar-layout-order
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
May 16, 2026

Copy link


Copy Markdown

Contributor
Description
image
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:
@LauraBeatrisLauraBeatris
self-assigned this
May 16, 2026
@changeset-bot
changeset-botBot
commented
May 16, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 83be304
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
May 16, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 18, 2026 3:09pm
Request Review
@LauraBeatris
LauraBeatris
changed the base branch from
main
to
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-stepMay 16, 2026 10:05
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
May 16, 2026 10:05
@LauraBeatrisLauraBeatris
changed the title
Update NavBar flex order by forwarding sx prop chore(ui): Update NavBar to receive containerSx prop May 16, 2026
@LauraBeatrisLauraBeatris
changed the title
chore(ui): Update NavBar to receive containerSx prop chore(ui): Update NavBar to receive containerSx propMay 16, 2026
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step
branch
3 times, most recently
from
c3e36bb to
25820ffCompareMay 16, 2026 21:26
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step
branch
3 times, most recently
from
b3dd719 to
c647566CompareMay 18, 2026 14:48

Base automatically changed from
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step to
mainMay 18, 2026 15:00
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/update-sidebar-layout-order
branch
from
3d9b478 to
f6f5dd0CompareMay 18, 2026 15:07
@coderabbitai
coderabbitaiBot
commented
May 18, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
No actionable comments were generated in the recent review. 🎉
ℹ️ Recent review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: b2e3cf74-8b9c-4f1f-bc6a-b1fd7004d59c
📥 Commits
Reviewing files that changed from the base of the PR and between 4fc38a0 and 83be304.
📒 Files selected for processing (3)
  • .changeset/thirty-jeans-live.md
  • packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
  • packages/ui/src/elements/Navbar.tsx
📝 Walkthrough
Walkthrough
This PR extends the NavBar component with an optional containerSx prop that allows consuming components to customize the navbar container's flex layout. The prop is threaded from NavBar through NavbarContainer, where it is merged with default styles via an sx array. The NavBar component's items rendering is also refactored to conditionally render the routes button column only when routes exist. ConfigureSSONavbar demonstrates the feature by applying column-reverse stacking with flex constraints.
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~12 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main change: adding a containerSx prop to the NavBar component, which aligns with all file modifications in the changeset.
Description check✅ PassedThe description relates to the changeset by including an image of the SSO configuration UI that uses the updated NavBar layout, and confirms tests and builds pass.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
May 18, 2026

Copy link


Copy Markdown

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

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

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

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

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@8568

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 83be304
@LauraBeatris
LauraBeatris
merged commit 3987851
into
mainMay 18, 2026

43 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/update-sidebar-layout-order

branch
May 18, 2026 15:40
@clerk-cookieclerk-cookie
mentioned this pull request
May 18, 2026
 Merged

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

Reviewers

@alexcarpenteralexcarpenteralexcarpenter approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@alexcarpenter

, '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('^' + ".*" + '
chore(ui): Update `NavBar` to receive `containerSx` prop by LauraBeatris · Pull Request #8568 · clerk/javascript · GitHub
Skip to content
chore(ui): Update NavBar to receive containerSx prop - #8568
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/update-sidebar-layout-order
May 18, 2026
Merged
chore(ui): Update NavBar to receive containerSx prop#8568
LauraBeatris merged 2 commits into
mainfrom 
laura/update-sidebar-layout-order
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
May 16, 2026

Copy link


Copy Markdown

Contributor
Description
image
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:
@LauraBeatrisLauraBeatris
self-assigned this
May 16, 2026
@changeset-bot
changeset-botBot
commented
May 16, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 83be304
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
May 16, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 18, 2026 3:09pm
Request Review
@LauraBeatris
LauraBeatris
changed the base branch from
main
to
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-stepMay 16, 2026 10:05
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
May 16, 2026 10:05
@LauraBeatrisLauraBeatris
changed the title
Update NavBar flex order by forwarding sx prop chore(ui): Update NavBar to receive containerSx prop May 16, 2026
@LauraBeatrisLauraBeatris
changed the title
chore(ui): Update NavBar to receive containerSx prop chore(ui): Update NavBar to receive containerSx propMay 16, 2026
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step
branch
3 times, most recently
from
c3e36bb to
25820ffCompareMay 16, 2026 21:26
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step
branch
3 times, most recently
from
b3dd719 to
c647566CompareMay 18, 2026 14:48

Base automatically changed from
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step to
mainMay 18, 2026 15:00
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/update-sidebar-layout-order
branch
from
3d9b478 to
f6f5dd0CompareMay 18, 2026 15:07
@coderabbitai
coderabbitaiBot
commented
May 18, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
No actionable comments were generated in the recent review. 🎉
ℹ️ Recent review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: b2e3cf74-8b9c-4f1f-bc6a-b1fd7004d59c
📥 Commits
Reviewing files that changed from the base of the PR and between 4fc38a0 and 83be304.
📒 Files selected for processing (3)
  • .changeset/thirty-jeans-live.md
  • packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
  • packages/ui/src/elements/Navbar.tsx
📝 Walkthrough
Walkthrough
This PR extends the NavBar component with an optional containerSx prop that allows consuming components to customize the navbar container's flex layout. The prop is threaded from NavBar through NavbarContainer, where it is merged with default styles via an sx array. The NavBar component's items rendering is also refactored to conditionally render the routes button column only when routes exist. ConfigureSSONavbar demonstrates the feature by applying column-reverse stacking with flex constraints.
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~12 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main change: adding a containerSx prop to the NavBar component, which aligns with all file modifications in the changeset.
Description check✅ PassedThe description relates to the changeset by including an image of the SSO configuration UI that uses the updated NavBar layout, and confirms tests and builds pass.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
May 18, 2026

Copy link


Copy Markdown

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

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

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

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

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@8568

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 83be304
@LauraBeatris
LauraBeatris
merged commit 3987851
into
mainMay 18, 2026

43 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/update-sidebar-layout-order

branch
May 18, 2026 15:40
@clerk-cookieclerk-cookie
mentioned this pull request
May 18, 2026
 Merged

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

Reviewers

@alexcarpenteralexcarpenteralexcarpenter approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@alexcarpenter

, '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" + '
chore(ui): Update `NavBar` to receive `containerSx` prop by LauraBeatris · Pull Request #8568 · clerk/javascript · GitHub
Skip to content
chore(ui): Update NavBar to receive containerSx prop - #8568
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/update-sidebar-layout-order
May 18, 2026
Merged
chore(ui): Update NavBar to receive containerSx prop#8568
LauraBeatris merged 2 commits into
mainfrom 
laura/update-sidebar-layout-order
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
May 16, 2026

Copy link


Copy Markdown

Contributor
Description
image
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:
@LauraBeatrisLauraBeatris
self-assigned this
May 16, 2026
@changeset-bot
changeset-botBot
commented
May 16, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 83be304
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
May 16, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 18, 2026 3:09pm
Request Review
@LauraBeatris
LauraBeatris
changed the base branch from
main
to
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-stepMay 16, 2026 10:05
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
May 16, 2026 10:05
@LauraBeatrisLauraBeatris
changed the title
Update NavBar flex order by forwarding sx prop chore(ui): Update NavBar to receive containerSx prop May 16, 2026
@LauraBeatrisLauraBeatris
changed the title
chore(ui): Update NavBar to receive containerSx prop chore(ui): Update NavBar to receive containerSx propMay 16, 2026
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step
branch
3 times, most recently
from
c3e36bb to
25820ffCompareMay 16, 2026 21:26
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step
branch
3 times, most recently
from
b3dd719 to
c647566CompareMay 18, 2026 14:48

Base automatically changed from
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step to
mainMay 18, 2026 15:00
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/update-sidebar-layout-order
branch
from
3d9b478 to
f6f5dd0CompareMay 18, 2026 15:07
@coderabbitai
coderabbitaiBot
commented
May 18, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
No actionable comments were generated in the recent review. 🎉
ℹ️ Recent review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: b2e3cf74-8b9c-4f1f-bc6a-b1fd7004d59c
📥 Commits
Reviewing files that changed from the base of the PR and between 4fc38a0 and 83be304.
📒 Files selected for processing (3)
  • .changeset/thirty-jeans-live.md
  • packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
  • packages/ui/src/elements/Navbar.tsx
📝 Walkthrough
Walkthrough
This PR extends the NavBar component with an optional containerSx prop that allows consuming components to customize the navbar container's flex layout. The prop is threaded from NavBar through NavbarContainer, where it is merged with default styles via an sx array. The NavBar component's items rendering is also refactored to conditionally render the routes button column only when routes exist. ConfigureSSONavbar demonstrates the feature by applying column-reverse stacking with flex constraints.
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~12 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main change: adding a containerSx prop to the NavBar component, which aligns with all file modifications in the changeset.
Description check✅ PassedThe description relates to the changeset by including an image of the SSO configuration UI that uses the updated NavBar layout, and confirms tests and builds pass.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
May 18, 2026

Copy link


Copy Markdown

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

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

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

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

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@8568

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 83be304
@LauraBeatris
LauraBeatris
merged commit 3987851
into
mainMay 18, 2026

43 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/update-sidebar-layout-order

branch
May 18, 2026 15:40
@clerk-cookieclerk-cookie
mentioned this pull request
May 18, 2026
 Merged

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

Reviewers

@alexcarpenteralexcarpenteralexcarpenter approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@alexcarpenter

, '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('^' + ".*" + '
chore(ui): Update `NavBar` to receive `containerSx` prop by LauraBeatris · Pull Request #8568 · clerk/javascript · GitHub
Skip to content
chore(ui): Update NavBar to receive containerSx prop - #8568
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/update-sidebar-layout-order
May 18, 2026
Merged
chore(ui): Update NavBar to receive containerSx prop#8568
LauraBeatris merged 2 commits into
mainfrom 
laura/update-sidebar-layout-order
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
May 16, 2026

Copy link


Copy Markdown

Contributor
Description
image
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:
@LauraBeatrisLauraBeatris
self-assigned this
May 16, 2026
@changeset-bot
changeset-botBot
commented
May 16, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 83be304
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
May 16, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 18, 2026 3:09pm
Request Review
@LauraBeatris
LauraBeatris
changed the base branch from
main
to
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-stepMay 16, 2026 10:05
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
May 16, 2026 10:05
@LauraBeatrisLauraBeatris
changed the title
Update NavBar flex order by forwarding sx prop chore(ui): Update NavBar to receive containerSx prop May 16, 2026
@LauraBeatrisLauraBeatris
changed the title
chore(ui): Update NavBar to receive containerSx prop chore(ui): Update NavBar to receive containerSx propMay 16, 2026
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step
branch
3 times, most recently
from
c3e36bb to
25820ffCompareMay 16, 2026 21:26
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step
branch
3 times, most recently
from
b3dd719 to
c647566CompareMay 18, 2026 14:48

Base automatically changed from
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step to
mainMay 18, 2026 15:00
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/update-sidebar-layout-order
branch
from
3d9b478 to
f6f5dd0CompareMay 18, 2026 15:07
@coderabbitai
coderabbitaiBot
commented
May 18, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
No actionable comments were generated in the recent review. 🎉
ℹ️ Recent review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: b2e3cf74-8b9c-4f1f-bc6a-b1fd7004d59c
📥 Commits
Reviewing files that changed from the base of the PR and between 4fc38a0 and 83be304.
📒 Files selected for processing (3)
  • .changeset/thirty-jeans-live.md
  • packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
  • packages/ui/src/elements/Navbar.tsx
📝 Walkthrough
Walkthrough
This PR extends the NavBar component with an optional containerSx prop that allows consuming components to customize the navbar container's flex layout. The prop is threaded from NavBar through NavbarContainer, where it is merged with default styles via an sx array. The NavBar component's items rendering is also refactored to conditionally render the routes button column only when routes exist. ConfigureSSONavbar demonstrates the feature by applying column-reverse stacking with flex constraints.
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~12 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main change: adding a containerSx prop to the NavBar component, which aligns with all file modifications in the changeset.
Description check✅ PassedThe description relates to the changeset by including an image of the SSO configuration UI that uses the updated NavBar layout, and confirms tests and builds pass.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
May 18, 2026

Copy link


Copy Markdown

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

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

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

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

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@8568

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 83be304
@LauraBeatris
LauraBeatris
merged commit 3987851
into
mainMay 18, 2026

43 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/update-sidebar-layout-order

branch
May 18, 2026 15:40
@clerk-cookieclerk-cookie
mentioned this pull request
May 18, 2026
 Merged

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

Reviewers

@alexcarpenteralexcarpenteralexcarpenter approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@alexcarpenter

, '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); }
})();
})();
chore(ui): Update `NavBar` to receive `containerSx` prop by LauraBeatris · Pull Request #8568 · clerk/javascript · GitHub
Skip to content
chore(ui): Update NavBar to receive containerSx prop - #8568
Merged
LauraBeatris merged 2 commits into
mainfrom 
laura/update-sidebar-layout-order
May 18, 2026
Merged
chore(ui): Update NavBar to receive containerSx prop#8568
LauraBeatris merged 2 commits into
mainfrom 
laura/update-sidebar-layout-order
Conversation
@LauraBeatris
@LauraBeatrisLauraBeatris
commented
May 16, 2026

Copy link


Copy Markdown

Contributor
Description
image
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:
@LauraBeatrisLauraBeatris
self-assigned this
May 16, 2026
@changeset-bot
changeset-botBot
commented
May 16, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 83be304
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
NameType
@clerk/uiPatch
@clerk/chrome-extensionPatch
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
May 16, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 18, 2026 3:09pm
Request Review
@LauraBeatris
LauraBeatris
changed the base branch from
main
to
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-stepMay 16, 2026 10:05
@LauraBeatris
LauraBeatris
marked this pull request as ready for review
May 16, 2026 10:05
@LauraBeatrisLauraBeatris
changed the title
Update NavBar flex order by forwarding sx prop chore(ui): Update NavBar to receive containerSx prop May 16, 2026
@LauraBeatrisLauraBeatris
changed the title
chore(ui): Update NavBar to receive containerSx prop chore(ui): Update NavBar to receive containerSx propMay 16, 2026
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step
branch
3 times, most recently
from
c3e36bb to
25820ffCompareMay 16, 2026 21:26
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step
branch
3 times, most recently
from
b3dd719 to
c647566CompareMay 18, 2026 14:48

Base automatically changed from
laura/orgs-1539-configuresso-support-custom-saml-provider-on-configure-step to
mainMay 18, 2026 15:00
@LauraBeatris
LauraBeatrisforce-pushed
the
laura/update-sidebar-layout-order
branch
from
3d9b478 to
f6f5dd0CompareMay 18, 2026 15:07
@coderabbitai
coderabbitaiBot
commented
May 18, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
No actionable comments were generated in the recent review. 🎉
ℹ️ Recent review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: b2e3cf74-8b9c-4f1f-bc6a-b1fd7004d59c
📥 Commits
Reviewing files that changed from the base of the PR and between 4fc38a0 and 83be304.
📒 Files selected for processing (3)
  • .changeset/thirty-jeans-live.md
  • packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
  • packages/ui/src/elements/Navbar.tsx
📝 Walkthrough
Walkthrough
This PR extends the NavBar component with an optional containerSx prop that allows consuming components to customize the navbar container's flex layout. The prop is threaded from NavBar through NavbarContainer, where it is merged with default styles via an sx array. The NavBar component's items rendering is also refactored to conditionally render the routes button column only when routes exist. ConfigureSSONavbar demonstrates the feature by applying column-reverse stacking with flex constraints.
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~12 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main change: adding a containerSx prop to the NavBar component, which aligns with all file modifications in the changeset.
Description check✅ PassedThe description relates to the changeset by including an image of the SSO configuration UI that uses the updated NavBar layout, and confirms tests and builds pass.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
Comment @coderabbitai help to get the list of available commands and usage tips.
@pkg-pr-new
pkg-pr-newBot
commented
May 18, 2026

Copy link


Copy Markdown

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

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

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

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

@clerk/dev-cli
npm i https://pkg.pr.new/@clerk/dev-cli@8568

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 83be304
@LauraBeatris
LauraBeatris
merged commit 3987851
into
mainMay 18, 2026

43 checks passed

@LauraBeatris
LauraBeatris
deleted the

laura/update-sidebar-layout-order

branch
May 18, 2026 15:40
@clerk-cookieclerk-cookie
mentioned this pull request
May 18, 2026
 Merged

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

Reviewers

@alexcarpenteralexcarpenteralexcarpenter approved these changes

Assignees

@LauraBeatrisLauraBeatris

Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@LauraBeatris@alexcarpenter