Skip to content

feat(headless): add Tabs primitive - #8476

Closed
alexcarpenter wants to merge 22 commits into
mainfrom
carp/headless-tabs
Closed

feat(headless): add Tabs primitive#8476
alexcarpenter wants to merge 22 commits into
mainfrom
carp/headless-tabs

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented May 5, 2026•
edited
Loading

Copy link
Copy Markdown
Member

Summary

  • Adds Tabs primitive with animated indicator via CSS custom properties
  • Roving tabindex navigation, manual/automatic activation modes
  • shouldForceMount for directional slide animations

Review Stack

Review order — start at #8474 (foundation) and work up. Each PR adds one primitive on top of the previous.

#PRWhat it addsBase
1#8474Foundation (infra + hooks + utils + Dialog)main
2#8475Accordion← #8474
3#8476Tabs← #8475
4#8477cssVars + Tooltip← #8476
5#8478Popover← #8477
6#8479Select← #8478
7#8480Menu← #8479
8#8481Autocomplete + integration tests← #8480
9#8764Collapsible← #8481

Test plan

  • pnpm build succeeds
  • pnpm test passes (+45 tabs tests)
  • CI passes

🤖 Generated with Claude Code

@vercel

vercelBot commented May 5, 2026•
edited
Loading

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxErrorErrorJun 3, 2026 5:33pm

Request Review

@changeset-bot

changeset-botBot commented May 5, 2026•
edited
Loading

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 8ed36d3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

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

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@alexcarpenter
alexcarpenterforce-pushed the carp/headless-accordion branch from 9f473a8 to 5b5ddfaCompareMay 5, 2026 15:26
@alexcarpenteralexcarpenter mentioned this pull request May 5, 2026
Merged
3 tasks
This was referenced May 5, 2026
Merged
Closed
Closed
Closed
Closed
Closed
@alexcarpenter
alexcarpenterforce-pushed the carp/headless-accordion branch from 5b5ddfa to 47cce7aCompareMay 5, 2026 15:39
@alexcarpenter
alexcarpenterforce-pushed the carp/headless-accordion branch from 47cce7a to 78ffbf1CompareMay 5, 2026 15:49
@alexcarpenter
alexcarpenterforce-pushed the carp/headless-accordion branch from 78ffbf1 to 22dc58fCompareMay 5, 2026 18:38
alexcarpenterand others added 8 commits June 3, 2026 12:13
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
27fa431
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
chore: add changeset for headless package
823c47d
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
fix(headless): prevent FloatingOverlay from mounting when dialog is c…
056f8ed
…losed
FloatingOverlay applies overflow:hidden to the body, which locks scroll.
Previously it was always rendered in the non-scoped path — now it's only
mounted when the backdrop is visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
remove cloneElement usage
061bcf5
@alexcarpenter
add sideEffects: false
abc3273
@alexcarpenter
fix(headless): prevent DialogPopup from mounting when dialog is closed
2dc023e
Without Dialog.Portal wrapping it, DialogPopup rendered FloatingFocusManager
and popup DOM unconditionally. Gate on mounted state to match DialogOverlay
and DialogPortal behavior.
@alexcarpenter
refactor(headless): split Dialog into per-file parts for tree-shaking
3d3d5d6
Split the monolithic dialog.tsx into individual files per subcomponent
and use `export * as Dialog` namespace re-export instead of Object.assign.
This enables bundlers to tree-shake unused Dialog parts at the module level.
API change: <Dialog> becomes <Dialog.Root>
@alexcarpenter
chore: regenerate pnpm-lock.yaml after rebase on main
4430af5
@alexcarpenter
alexcarpenterforce-pushed the carp/headless-accordion branch from 483637a to a7cbc25CompareJune 3, 2026 17:23
alexcarpenterand others added 13 commits June 3, 2026 13:32
@alexcarpenter
chore: deduplicate pnpm-lock.yaml
ca83881
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
373d49f
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
b54202b
@alexcarpenter
refactor(headless): split Accordion into per-file parts for tree-shaking
fca1f8d
@alexcarpenter
docs(headless): update Accordion README for .Root usage
ba2ce88
@alexcarpenter
fix(headless): update Accordion context error message for .Root usage
2379a11
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
854a75e
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
b6ce123
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
95d38e2
@alexcarpenter
feat(headless): add Tabs primitive
b5d669e
@alexcarpenter
refactor(headless): split Tabs into per-file parts for tree-shaking
795ea24
@alexcarpenter
docs(headless): update Tabs README for .Root usage
d72561f
@alexcarpenter
fix(headless): update Tabs context error message for .Root usage
8ed36d3
@alexcarpenter
alexcarpenterforce-pushed the carp/headless-accordion branch from a7cbc25 to 2379a11CompareJune 3, 2026 17:33
@alexcarpenteralexcarpenter mentioned this pull request Jun 5, 2026
Closed
4 tasks
@alexcarpenter
alexcarpenterforce-pushed the carp/headless-accordion branch from 2379a11 to 8b06f02CompareJune 9, 2026 19:31
Base automatically changed from carp/headless-accordion to mainJune 9, 2026 20:15
@alexcarpenteralexcarpenter mentioned this pull request Jun 9, 2026
Merged
4 tasks
@alexcarpenter

alexcarpenter commented Jun 9, 2026

Copy link
Copy Markdown
MemberAuthor

Superseded by #8790, which consolidates the remaining headless primitive stack (Tabs → Collapsible) into a single PR for one review pass. Closing in favor of that.

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@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" + '
feat(headless): add Tabs primitive by alexcarpenter · Pull Request #8476 · clerk/javascript · GitHub
Skip to content
feat(headless): add Tabs primitive - #8476
Closed
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Closed
feat(headless): add Tabs primitive#8476
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Summary
  • Adds Tabs primitive with animated indicator via CSS custom properties
  • Roving tabindex navigation, manual/automatic activation modes
  • shouldForceMount for directional slide animations
Review Stack
Review order — start at #8474 (foundation) and work up. Each PR adds one primitive on top of the previous.
#PRWhat it addsBase
1#8474Foundation (infra + hooks + utils + Dialog)main
2#8475Accordion← #8474
3#8476Tabs← #8475
4#8477cssVars + Tooltip← #8476
5#8478Popover← #8477
6#8479Select← #8478
7#8480Menu← #8479
8#8481Autocomplete + integration tests← #8480
9#8764Collapsible← #8481
Test plan
  • pnpm build succeeds
  • pnpm test passes (+45 tabs tests)
  •  CI passes
🤖 Generated with Claude Code
@vercel
vercelBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxErrorErrorJun 3, 2026 5:33pm
Request Review
@changeset-bot
changeset-botBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 8ed36d3
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
9f473a8 to
5b5ddfaCompareMay 5, 2026 15:26
@alexcarpenteralexcarpenter
mentioned this pull request
May 5, 2026
 Merged

3 tasks

This was referenced May 5, 2026
 Merged

 Closed

 Closed

 Closed

 Closed

 Closed

@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
5b5ddfa to
47cce7aCompareMay 5, 2026 15:39
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
47cce7a to
78ffbf1CompareMay 5, 2026 15:49
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
78ffbf1 to
22dc58fCompareMay 5, 2026 18:38
alexcarpenterand others
added 8 commits
June 3, 2026 12:13
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
27fa431
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
chore: add changeset for headless package
823c47d
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
fix(headless): prevent FloatingOverlay from mounting when dialog is c…
056f8ed
…losed
FloatingOverlay applies overflow:hidden to the body, which locks scroll.
Previously it was always rendered in the non-scoped path — now it's only
mounted when the backdrop is visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
remove cloneElement usage
061bcf5
@alexcarpenter
add sideEffects: false
abc3273
@alexcarpenter
fix(headless): prevent DialogPopup from mounting when dialog is closed
2dc023e
Without Dialog.Portal wrapping it, DialogPopup rendered FloatingFocusManager
and popup DOM unconditionally. Gate on mounted state to match DialogOverlay
and DialogPortal behavior.
@alexcarpenter
refactor(headless): split Dialog into per-file parts for tree-shaking
3d3d5d6
Split the monolithic dialog.tsx into individual files per subcomponent
and use `export * as Dialog` namespace re-export instead of Object.assign.
This enables bundlers to tree-shake unused Dialog parts at the module level.
API change: <Dialog> becomes <Dialog.Root>
@alexcarpenter
chore: regenerate pnpm-lock.yaml after rebase on main
4430af5
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
483637a to
a7cbc25CompareJune 3, 2026 17:23
alexcarpenterand others
added 13 commits
June 3, 2026 13:32
@alexcarpenter
chore: deduplicate pnpm-lock.yaml
ca83881
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
373d49f
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
b54202b
@alexcarpenter
refactor(headless): split Accordion into per-file parts for tree-shaking
fca1f8d
@alexcarpenter
docs(headless): update Accordion README for .Root usage
ba2ce88
@alexcarpenter
fix(headless): update Accordion context error message for .Root usage
2379a11
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
854a75e
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
b6ce123
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
95d38e2
@alexcarpenter
feat(headless): add Tabs primitive
b5d669e
@alexcarpenter
refactor(headless): split Tabs into per-file parts for tree-shaking
795ea24
@alexcarpenter
docs(headless): update Tabs README for .Root usage
d72561f
@alexcarpenter
fix(headless): update Tabs context error message for .Root usage
8ed36d3
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
a7cbc25 to
2379a11CompareJune 3, 2026 17:33
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 5, 2026
 Closed

4 tasks
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
2379a11 to
8b06f02CompareJune 9, 2026 19:31

Base automatically changed from
carp/headless-accordion to
mainJune 9, 2026 20:15
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 9, 2026
 Merged

4 tasks
@alexcarpenter
alexcarpenter
commented
Jun 9, 2026

Copy link


Copy Markdown

MemberAuthor
Superseded by #8790, which consolidates the remaining headless primitive stack (Tabs → Collapsible) into a single PR for one review pass. Closing in favor of that.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@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('^' + ".*" + '
feat(headless): add Tabs primitive by alexcarpenter · Pull Request #8476 · clerk/javascript · GitHub
Skip to content
feat(headless): add Tabs primitive - #8476
Closed
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Closed
feat(headless): add Tabs primitive#8476
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Summary
  • Adds Tabs primitive with animated indicator via CSS custom properties
  • Roving tabindex navigation, manual/automatic activation modes
  • shouldForceMount for directional slide animations
Review Stack
Review order — start at #8474 (foundation) and work up. Each PR adds one primitive on top of the previous.
#PRWhat it addsBase
1#8474Foundation (infra + hooks + utils + Dialog)main
2#8475Accordion← #8474
3#8476Tabs← #8475
4#8477cssVars + Tooltip← #8476
5#8478Popover← #8477
6#8479Select← #8478
7#8480Menu← #8479
8#8481Autocomplete + integration tests← #8480
9#8764Collapsible← #8481
Test plan
  • pnpm build succeeds
  • pnpm test passes (+45 tabs tests)
  •  CI passes
🤖 Generated with Claude Code
@vercel
vercelBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxErrorErrorJun 3, 2026 5:33pm
Request Review
@changeset-bot
changeset-botBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 8ed36d3
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
9f473a8 to
5b5ddfaCompareMay 5, 2026 15:26
@alexcarpenteralexcarpenter
mentioned this pull request
May 5, 2026
 Merged

3 tasks

This was referenced May 5, 2026
 Merged

 Closed

 Closed

 Closed

 Closed

 Closed

@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
5b5ddfa to
47cce7aCompareMay 5, 2026 15:39
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
47cce7a to
78ffbf1CompareMay 5, 2026 15:49
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
78ffbf1 to
22dc58fCompareMay 5, 2026 18:38
alexcarpenterand others
added 8 commits
June 3, 2026 12:13
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
27fa431
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
chore: add changeset for headless package
823c47d
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
fix(headless): prevent FloatingOverlay from mounting when dialog is c…
056f8ed
…losed
FloatingOverlay applies overflow:hidden to the body, which locks scroll.
Previously it was always rendered in the non-scoped path — now it's only
mounted when the backdrop is visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
remove cloneElement usage
061bcf5
@alexcarpenter
add sideEffects: false
abc3273
@alexcarpenter
fix(headless): prevent DialogPopup from mounting when dialog is closed
2dc023e
Without Dialog.Portal wrapping it, DialogPopup rendered FloatingFocusManager
and popup DOM unconditionally. Gate on mounted state to match DialogOverlay
and DialogPortal behavior.
@alexcarpenter
refactor(headless): split Dialog into per-file parts for tree-shaking
3d3d5d6
Split the monolithic dialog.tsx into individual files per subcomponent
and use `export * as Dialog` namespace re-export instead of Object.assign.
This enables bundlers to tree-shake unused Dialog parts at the module level.
API change: <Dialog> becomes <Dialog.Root>
@alexcarpenter
chore: regenerate pnpm-lock.yaml after rebase on main
4430af5
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
483637a to
a7cbc25CompareJune 3, 2026 17:23
alexcarpenterand others
added 13 commits
June 3, 2026 13:32
@alexcarpenter
chore: deduplicate pnpm-lock.yaml
ca83881
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
373d49f
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
b54202b
@alexcarpenter
refactor(headless): split Accordion into per-file parts for tree-shaking
fca1f8d
@alexcarpenter
docs(headless): update Accordion README for .Root usage
ba2ce88
@alexcarpenter
fix(headless): update Accordion context error message for .Root usage
2379a11
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
854a75e
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
b6ce123
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
95d38e2
@alexcarpenter
feat(headless): add Tabs primitive
b5d669e
@alexcarpenter
refactor(headless): split Tabs into per-file parts for tree-shaking
795ea24
@alexcarpenter
docs(headless): update Tabs README for .Root usage
d72561f
@alexcarpenter
fix(headless): update Tabs context error message for .Root usage
8ed36d3
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
a7cbc25 to
2379a11CompareJune 3, 2026 17:33
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 5, 2026
 Closed

4 tasks
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
2379a11 to
8b06f02CompareJune 9, 2026 19:31

Base automatically changed from
carp/headless-accordion to
mainJune 9, 2026 20:15
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 9, 2026
 Merged

4 tasks
@alexcarpenter
alexcarpenter
commented
Jun 9, 2026

Copy link


Copy Markdown

MemberAuthor
Superseded by #8790, which consolidates the remaining headless primitive stack (Tabs → Collapsible) into a single PR for one review pass. Closing in favor of that.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@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('^' + ".*" + '
feat(headless): add Tabs primitive by alexcarpenter · Pull Request #8476 · clerk/javascript · GitHub
Skip to content
feat(headless): add Tabs primitive - #8476
Closed
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Closed
feat(headless): add Tabs primitive#8476
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Summary
  • Adds Tabs primitive with animated indicator via CSS custom properties
  • Roving tabindex navigation, manual/automatic activation modes
  • shouldForceMount for directional slide animations
Review Stack
Review order — start at #8474 (foundation) and work up. Each PR adds one primitive on top of the previous.
#PRWhat it addsBase
1#8474Foundation (infra + hooks + utils + Dialog)main
2#8475Accordion← #8474
3#8476Tabs← #8475
4#8477cssVars + Tooltip← #8476
5#8478Popover← #8477
6#8479Select← #8478
7#8480Menu← #8479
8#8481Autocomplete + integration tests← #8480
9#8764Collapsible← #8481
Test plan
  • pnpm build succeeds
  • pnpm test passes (+45 tabs tests)
  •  CI passes
🤖 Generated with Claude Code
@vercel
vercelBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxErrorErrorJun 3, 2026 5:33pm
Request Review
@changeset-bot
changeset-botBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 8ed36d3
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
9f473a8 to
5b5ddfaCompareMay 5, 2026 15:26
@alexcarpenteralexcarpenter
mentioned this pull request
May 5, 2026
 Merged

3 tasks

This was referenced May 5, 2026
 Merged

 Closed

 Closed

 Closed

 Closed

 Closed

@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
5b5ddfa to
47cce7aCompareMay 5, 2026 15:39
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
47cce7a to
78ffbf1CompareMay 5, 2026 15:49
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
78ffbf1 to
22dc58fCompareMay 5, 2026 18:38
alexcarpenterand others
added 8 commits
June 3, 2026 12:13
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
27fa431
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
chore: add changeset for headless package
823c47d
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
fix(headless): prevent FloatingOverlay from mounting when dialog is c…
056f8ed
…losed
FloatingOverlay applies overflow:hidden to the body, which locks scroll.
Previously it was always rendered in the non-scoped path — now it's only
mounted when the backdrop is visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
remove cloneElement usage
061bcf5
@alexcarpenter
add sideEffects: false
abc3273
@alexcarpenter
fix(headless): prevent DialogPopup from mounting when dialog is closed
2dc023e
Without Dialog.Portal wrapping it, DialogPopup rendered FloatingFocusManager
and popup DOM unconditionally. Gate on mounted state to match DialogOverlay
and DialogPortal behavior.
@alexcarpenter
refactor(headless): split Dialog into per-file parts for tree-shaking
3d3d5d6
Split the monolithic dialog.tsx into individual files per subcomponent
and use `export * as Dialog` namespace re-export instead of Object.assign.
This enables bundlers to tree-shake unused Dialog parts at the module level.
API change: <Dialog> becomes <Dialog.Root>
@alexcarpenter
chore: regenerate pnpm-lock.yaml after rebase on main
4430af5
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
483637a to
a7cbc25CompareJune 3, 2026 17:23
alexcarpenterand others
added 13 commits
June 3, 2026 13:32
@alexcarpenter
chore: deduplicate pnpm-lock.yaml
ca83881
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
373d49f
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
b54202b
@alexcarpenter
refactor(headless): split Accordion into per-file parts for tree-shaking
fca1f8d
@alexcarpenter
docs(headless): update Accordion README for .Root usage
ba2ce88
@alexcarpenter
fix(headless): update Accordion context error message for .Root usage
2379a11
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
854a75e
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
b6ce123
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
95d38e2
@alexcarpenter
feat(headless): add Tabs primitive
b5d669e
@alexcarpenter
refactor(headless): split Tabs into per-file parts for tree-shaking
795ea24
@alexcarpenter
docs(headless): update Tabs README for .Root usage
d72561f
@alexcarpenter
fix(headless): update Tabs context error message for .Root usage
8ed36d3
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
a7cbc25 to
2379a11CompareJune 3, 2026 17:33
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 5, 2026
 Closed

4 tasks
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
2379a11 to
8b06f02CompareJune 9, 2026 19:31

Base automatically changed from
carp/headless-accordion to
mainJune 9, 2026 20:15
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 9, 2026
 Merged

4 tasks
@alexcarpenter
alexcarpenter
commented
Jun 9, 2026

Copy link


Copy Markdown

MemberAuthor
Superseded by #8790, which consolidates the remaining headless primitive stack (Tabs → Collapsible) into a single PR for one review pass. Closing in favor of that.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@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" + '
feat(headless): add Tabs primitive by alexcarpenter · Pull Request #8476 · clerk/javascript · GitHub
Skip to content
feat(headless): add Tabs primitive - #8476
Closed
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Closed
feat(headless): add Tabs primitive#8476
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Summary
  • Adds Tabs primitive with animated indicator via CSS custom properties
  • Roving tabindex navigation, manual/automatic activation modes
  • shouldForceMount for directional slide animations
Review Stack
Review order — start at #8474 (foundation) and work up. Each PR adds one primitive on top of the previous.
#PRWhat it addsBase
1#8474Foundation (infra + hooks + utils + Dialog)main
2#8475Accordion← #8474
3#8476Tabs← #8475
4#8477cssVars + Tooltip← #8476
5#8478Popover← #8477
6#8479Select← #8478
7#8480Menu← #8479
8#8481Autocomplete + integration tests← #8480
9#8764Collapsible← #8481
Test plan
  • pnpm build succeeds
  • pnpm test passes (+45 tabs tests)
  •  CI passes
🤖 Generated with Claude Code
@vercel
vercelBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxErrorErrorJun 3, 2026 5:33pm
Request Review
@changeset-bot
changeset-botBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 8ed36d3
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
9f473a8 to
5b5ddfaCompareMay 5, 2026 15:26
@alexcarpenteralexcarpenter
mentioned this pull request
May 5, 2026
 Merged

3 tasks

This was referenced May 5, 2026
 Merged

 Closed

 Closed

 Closed

 Closed

 Closed

@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
5b5ddfa to
47cce7aCompareMay 5, 2026 15:39
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
47cce7a to
78ffbf1CompareMay 5, 2026 15:49
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
78ffbf1 to
22dc58fCompareMay 5, 2026 18:38
alexcarpenterand others
added 8 commits
June 3, 2026 12:13
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
27fa431
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
chore: add changeset for headless package
823c47d
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
fix(headless): prevent FloatingOverlay from mounting when dialog is c…
056f8ed
…losed
FloatingOverlay applies overflow:hidden to the body, which locks scroll.
Previously it was always rendered in the non-scoped path — now it's only
mounted when the backdrop is visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
remove cloneElement usage
061bcf5
@alexcarpenter
add sideEffects: false
abc3273
@alexcarpenter
fix(headless): prevent DialogPopup from mounting when dialog is closed
2dc023e
Without Dialog.Portal wrapping it, DialogPopup rendered FloatingFocusManager
and popup DOM unconditionally. Gate on mounted state to match DialogOverlay
and DialogPortal behavior.
@alexcarpenter
refactor(headless): split Dialog into per-file parts for tree-shaking
3d3d5d6
Split the monolithic dialog.tsx into individual files per subcomponent
and use `export * as Dialog` namespace re-export instead of Object.assign.
This enables bundlers to tree-shake unused Dialog parts at the module level.
API change: <Dialog> becomes <Dialog.Root>
@alexcarpenter
chore: regenerate pnpm-lock.yaml after rebase on main
4430af5
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
483637a to
a7cbc25CompareJune 3, 2026 17:23
alexcarpenterand others
added 13 commits
June 3, 2026 13:32
@alexcarpenter
chore: deduplicate pnpm-lock.yaml
ca83881
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
373d49f
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
b54202b
@alexcarpenter
refactor(headless): split Accordion into per-file parts for tree-shaking
fca1f8d
@alexcarpenter
docs(headless): update Accordion README for .Root usage
ba2ce88
@alexcarpenter
fix(headless): update Accordion context error message for .Root usage
2379a11
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
854a75e
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
b6ce123
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
95d38e2
@alexcarpenter
feat(headless): add Tabs primitive
b5d669e
@alexcarpenter
refactor(headless): split Tabs into per-file parts for tree-shaking
795ea24
@alexcarpenter
docs(headless): update Tabs README for .Root usage
d72561f
@alexcarpenter
fix(headless): update Tabs context error message for .Root usage
8ed36d3
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
a7cbc25 to
2379a11CompareJune 3, 2026 17:33
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 5, 2026
 Closed

4 tasks
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
2379a11 to
8b06f02CompareJune 9, 2026 19:31

Base automatically changed from
carp/headless-accordion to
mainJune 9, 2026 20:15
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 9, 2026
 Merged

4 tasks
@alexcarpenter
alexcarpenter
commented
Jun 9, 2026

Copy link


Copy Markdown

MemberAuthor
Superseded by #8790, which consolidates the remaining headless primitive stack (Tabs → Collapsible) into a single PR for one review pass. Closing in favor of that.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@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('^' + ".*" + '
feat(headless): add Tabs primitive by alexcarpenter · Pull Request #8476 · clerk/javascript · GitHub
Skip to content
feat(headless): add Tabs primitive - #8476
Closed
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Closed
feat(headless): add Tabs primitive#8476
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Summary
  • Adds Tabs primitive with animated indicator via CSS custom properties
  • Roving tabindex navigation, manual/automatic activation modes
  • shouldForceMount for directional slide animations
Review Stack
Review order — start at #8474 (foundation) and work up. Each PR adds one primitive on top of the previous.
#PRWhat it addsBase
1#8474Foundation (infra + hooks + utils + Dialog)main
2#8475Accordion← #8474
3#8476Tabs← #8475
4#8477cssVars + Tooltip← #8476
5#8478Popover← #8477
6#8479Select← #8478
7#8480Menu← #8479
8#8481Autocomplete + integration tests← #8480
9#8764Collapsible← #8481
Test plan
  • pnpm build succeeds
  • pnpm test passes (+45 tabs tests)
  •  CI passes
🤖 Generated with Claude Code
@vercel
vercelBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxErrorErrorJun 3, 2026 5:33pm
Request Review
@changeset-bot
changeset-botBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 8ed36d3
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
9f473a8 to
5b5ddfaCompareMay 5, 2026 15:26
@alexcarpenteralexcarpenter
mentioned this pull request
May 5, 2026
 Merged

3 tasks

This was referenced May 5, 2026
 Merged

 Closed

 Closed

 Closed

 Closed

 Closed

@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
5b5ddfa to
47cce7aCompareMay 5, 2026 15:39
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
47cce7a to
78ffbf1CompareMay 5, 2026 15:49
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
78ffbf1 to
22dc58fCompareMay 5, 2026 18:38
alexcarpenterand others
added 8 commits
June 3, 2026 12:13
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
27fa431
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
chore: add changeset for headless package
823c47d
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
fix(headless): prevent FloatingOverlay from mounting when dialog is c…
056f8ed
…losed
FloatingOverlay applies overflow:hidden to the body, which locks scroll.
Previously it was always rendered in the non-scoped path — now it's only
mounted when the backdrop is visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
remove cloneElement usage
061bcf5
@alexcarpenter
add sideEffects: false
abc3273
@alexcarpenter
fix(headless): prevent DialogPopup from mounting when dialog is closed
2dc023e
Without Dialog.Portal wrapping it, DialogPopup rendered FloatingFocusManager
and popup DOM unconditionally. Gate on mounted state to match DialogOverlay
and DialogPortal behavior.
@alexcarpenter
refactor(headless): split Dialog into per-file parts for tree-shaking
3d3d5d6
Split the monolithic dialog.tsx into individual files per subcomponent
and use `export * as Dialog` namespace re-export instead of Object.assign.
This enables bundlers to tree-shake unused Dialog parts at the module level.
API change: <Dialog> becomes <Dialog.Root>
@alexcarpenter
chore: regenerate pnpm-lock.yaml after rebase on main
4430af5
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
483637a to
a7cbc25CompareJune 3, 2026 17:23
alexcarpenterand others
added 13 commits
June 3, 2026 13:32
@alexcarpenter
chore: deduplicate pnpm-lock.yaml
ca83881
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
373d49f
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
b54202b
@alexcarpenter
refactor(headless): split Accordion into per-file parts for tree-shaking
fca1f8d
@alexcarpenter
docs(headless): update Accordion README for .Root usage
ba2ce88
@alexcarpenter
fix(headless): update Accordion context error message for .Root usage
2379a11
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
854a75e
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
b6ce123
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
95d38e2
@alexcarpenter
feat(headless): add Tabs primitive
b5d669e
@alexcarpenter
refactor(headless): split Tabs into per-file parts for tree-shaking
795ea24
@alexcarpenter
docs(headless): update Tabs README for .Root usage
d72561f
@alexcarpenter
fix(headless): update Tabs context error message for .Root usage
8ed36d3
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
a7cbc25 to
2379a11CompareJune 3, 2026 17:33
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 5, 2026
 Closed

4 tasks
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
2379a11 to
8b06f02CompareJune 9, 2026 19:31

Base automatically changed from
carp/headless-accordion to
mainJune 9, 2026 20:15
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 9, 2026
 Merged

4 tasks
@alexcarpenter
alexcarpenter
commented
Jun 9, 2026

Copy link


Copy Markdown

MemberAuthor
Superseded by #8790, which consolidates the remaining headless primitive stack (Tabs → Collapsible) into a single PR for one review pass. Closing in favor of that.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@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); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(headless): add Tabs primitive by alexcarpenter · Pull Request #8476 · clerk/javascript · GitHub
Skip to content
feat(headless): add Tabs primitive - #8476
Closed
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Closed
feat(headless): add Tabs primitive#8476
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Summary
  • Adds Tabs primitive with animated indicator via CSS custom properties
  • Roving tabindex navigation, manual/automatic activation modes
  • shouldForceMount for directional slide animations
Review Stack
Review order — start at #8474 (foundation) and work up. Each PR adds one primitive on top of the previous.
#PRWhat it addsBase
1#8474Foundation (infra + hooks + utils + Dialog)main
2#8475Accordion← #8474
3#8476Tabs← #8475
4#8477cssVars + Tooltip← #8476
5#8478Popover← #8477
6#8479Select← #8478
7#8480Menu← #8479
8#8481Autocomplete + integration tests← #8480
9#8764Collapsible← #8481
Test plan
  • pnpm build succeeds
  • pnpm test passes (+45 tabs tests)
  •  CI passes
🤖 Generated with Claude Code
@vercel
vercelBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxErrorErrorJun 3, 2026 5:33pm
Request Review
@changeset-bot
changeset-botBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 8ed36d3
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
9f473a8 to
5b5ddfaCompareMay 5, 2026 15:26
@alexcarpenteralexcarpenter
mentioned this pull request
May 5, 2026
 Merged

3 tasks

This was referenced May 5, 2026
 Merged

 Closed

 Closed

 Closed

 Closed

 Closed

@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
5b5ddfa to
47cce7aCompareMay 5, 2026 15:39
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
47cce7a to
78ffbf1CompareMay 5, 2026 15:49
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
78ffbf1 to
22dc58fCompareMay 5, 2026 18:38
alexcarpenterand others
added 8 commits
June 3, 2026 12:13
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
27fa431
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
chore: add changeset for headless package
823c47d
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
fix(headless): prevent FloatingOverlay from mounting when dialog is c…
056f8ed
…losed
FloatingOverlay applies overflow:hidden to the body, which locks scroll.
Previously it was always rendered in the non-scoped path — now it's only
mounted when the backdrop is visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
remove cloneElement usage
061bcf5
@alexcarpenter
add sideEffects: false
abc3273
@alexcarpenter
fix(headless): prevent DialogPopup from mounting when dialog is closed
2dc023e
Without Dialog.Portal wrapping it, DialogPopup rendered FloatingFocusManager
and popup DOM unconditionally. Gate on mounted state to match DialogOverlay
and DialogPortal behavior.
@alexcarpenter
refactor(headless): split Dialog into per-file parts for tree-shaking
3d3d5d6
Split the monolithic dialog.tsx into individual files per subcomponent
and use `export * as Dialog` namespace re-export instead of Object.assign.
This enables bundlers to tree-shake unused Dialog parts at the module level.
API change: <Dialog> becomes <Dialog.Root>
@alexcarpenter
chore: regenerate pnpm-lock.yaml after rebase on main
4430af5
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
483637a to
a7cbc25CompareJune 3, 2026 17:23
alexcarpenterand others
added 13 commits
June 3, 2026 13:32
@alexcarpenter
chore: deduplicate pnpm-lock.yaml
ca83881
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
373d49f
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
b54202b
@alexcarpenter
refactor(headless): split Accordion into per-file parts for tree-shaking
fca1f8d
@alexcarpenter
docs(headless): update Accordion README for .Root usage
ba2ce88
@alexcarpenter
fix(headless): update Accordion context error message for .Root usage
2379a11
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
854a75e
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
b6ce123
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
95d38e2
@alexcarpenter
feat(headless): add Tabs primitive
b5d669e
@alexcarpenter
refactor(headless): split Tabs into per-file parts for tree-shaking
795ea24
@alexcarpenter
docs(headless): update Tabs README for .Root usage
d72561f
@alexcarpenter
fix(headless): update Tabs context error message for .Root usage
8ed36d3
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
a7cbc25 to
2379a11CompareJune 3, 2026 17:33
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 5, 2026
 Closed

4 tasks
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
2379a11 to
8b06f02CompareJune 9, 2026 19:31

Base automatically changed from
carp/headless-accordion to
mainJune 9, 2026 20:15
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 9, 2026
 Merged

4 tasks
@alexcarpenter
alexcarpenter
commented
Jun 9, 2026

Copy link


Copy Markdown

MemberAuthor
Superseded by #8790, which consolidates the remaining headless primitive stack (Tabs → Collapsible) into a single PR for one review pass. Closing in favor of that.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@alexcarpenter

, '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(headless): add Tabs primitive by alexcarpenter · Pull Request #8476 · clerk/javascript · GitHub
Skip to content
feat(headless): add Tabs primitive - #8476
Closed
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Closed
feat(headless): add Tabs primitive#8476
alexcarpenter wants to merge 22 commits into
mainfrom 
carp/headless-tabs
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Summary
  • Adds Tabs primitive with animated indicator via CSS custom properties
  • Roving tabindex navigation, manual/automatic activation modes
  • shouldForceMount for directional slide animations
Review Stack
Review order — start at #8474 (foundation) and work up. Each PR adds one primitive on top of the previous.
#PRWhat it addsBase
1#8474Foundation (infra + hooks + utils + Dialog)main
2#8475Accordion← #8474
3#8476Tabs← #8475
4#8477cssVars + Tooltip← #8476
5#8478Popover← #8477
6#8479Select← #8478
7#8480Menu← #8479
8#8481Autocomplete + integration tests← #8480
9#8764Collapsible← #8481
Test plan
  • pnpm build succeeds
  • pnpm test passes (+45 tabs tests)
  •  CI passes
🤖 Generated with Claude Code
@vercel
vercelBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxErrorErrorJun 3, 2026 5:33pm
Request Review
@changeset-bot
changeset-botBot
commented
May 5, 2026•

edited

Loading

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 8ed36d3
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
9f473a8 to
5b5ddfaCompareMay 5, 2026 15:26
@alexcarpenteralexcarpenter
mentioned this pull request
May 5, 2026
 Merged

3 tasks

This was referenced May 5, 2026
 Merged

 Closed

 Closed

 Closed

 Closed

 Closed

@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
5b5ddfa to
47cce7aCompareMay 5, 2026 15:39
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
47cce7a to
78ffbf1CompareMay 5, 2026 15:49
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
78ffbf1 to
22dc58fCompareMay 5, 2026 18:38
alexcarpenterand others
added 8 commits
June 3, 2026 12:13
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
27fa431
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
chore: add changeset for headless package
823c47d
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
fix(headless): prevent FloatingOverlay from mounting when dialog is c…
056f8ed
…losed
FloatingOverlay applies overflow:hidden to the body, which locks scroll.
Previously it was always rendered in the non-scoped path — now it's only
mounted when the backdrop is visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
remove cloneElement usage
061bcf5
@alexcarpenter
add sideEffects: false
abc3273
@alexcarpenter
fix(headless): prevent DialogPopup from mounting when dialog is closed
2dc023e
Without Dialog.Portal wrapping it, DialogPopup rendered FloatingFocusManager
and popup DOM unconditionally. Gate on mounted state to match DialogOverlay
and DialogPortal behavior.
@alexcarpenter
refactor(headless): split Dialog into per-file parts for tree-shaking
3d3d5d6
Split the monolithic dialog.tsx into individual files per subcomponent
and use `export * as Dialog` namespace re-export instead of Object.assign.
This enables bundlers to tree-shake unused Dialog parts at the module level.
API change: <Dialog> becomes <Dialog.Root>
@alexcarpenter
chore: regenerate pnpm-lock.yaml after rebase on main
4430af5
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
483637a to
a7cbc25CompareJune 3, 2026 17:23
alexcarpenterand others
added 13 commits
June 3, 2026 13:32
@alexcarpenter
chore: deduplicate pnpm-lock.yaml
ca83881
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
373d49f
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
b54202b
@alexcarpenter
refactor(headless): split Accordion into per-file parts for tree-shaking
fca1f8d
@alexcarpenter
docs(headless): update Accordion README for .Root usage
ba2ce88
@alexcarpenter
fix(headless): update Accordion context error message for .Root usage
2379a11
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
854a75e
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter@claude
feat(headless): add package foundation with Dialog primitive
b6ce123
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:
- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Accordion primitive
95d38e2
@alexcarpenter
feat(headless): add Tabs primitive
b5d669e
@alexcarpenter
refactor(headless): split Tabs into per-file parts for tree-shaking
795ea24
@alexcarpenter
docs(headless): update Tabs README for .Root usage
d72561f
@alexcarpenter
fix(headless): update Tabs context error message for .Root usage
8ed36d3
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
a7cbc25 to
2379a11CompareJune 3, 2026 17:33
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 5, 2026
 Closed

4 tasks
@alexcarpenter
alexcarpenterforce-pushed
the
carp/headless-accordion
branch
from
2379a11 to
8b06f02CompareJune 9, 2026 19:31

Base automatically changed from
carp/headless-accordion to
mainJune 9, 2026 20:15
@alexcarpenteralexcarpenter
mentioned this pull request
Jun 9, 2026
 Merged

4 tasks
@alexcarpenter
alexcarpenter
commented
Jun 9, 2026

Copy link


Copy Markdown

MemberAuthor
Superseded by #8790, which consolidates the remaining headless primitive stack (Tabs → Collapsible) into a single PR for one review pass. Closing in favor of that.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@alexcarpenter