Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

feat(clerk-js): IntroduceUNSAFE_PortalProvider#7310

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
alexcarpenter wants to merge14 commits intomain
base:main
Choose a base branch
Loading
fromalexcarpenter/portal-provider-3

Conversation

@alexcarpenter
Copy link
Member

@alexcarpenteralexcarpenter commentedNov 25, 2025
edited
Loading

Description

The<UNSAFE_PortalProvider> component allows you to specify a custom container for Clerk floating UI elements (popovers, modals, tooltips, etc.) that use portals. Only Clerk components within the provider will be affected—components outside the provider will continue to use the default document.body for portals.

This is particularly useful when using Clerk components inside external UI libraries likeRadix Dialog orReact Aria Components, where portaled elements need to render within the dialog's container to remain interactable.

Example usage

'use client'import{useRef}from'react'import*asDialogfrom'@radix-ui/react-dialog'import{UNSAFE_PortalProvider,UserButton}from'@clerk/nextjs'exportfunctionUserDialog(){constcontainerRef=useRef<HTMLDivElement>(null)return(<Dialog.Root><Dialog.Trigger>Open Dialog</Dialog.Trigger><Dialog.Portal><Dialog.Overlay/><Dialog.Contentref={containerRef}><UNSAFE_PortalProvidergetContainer={()=>containerRef.current}><UserButton/></UNSAFE_PortalProvider></Dialog.Content></Dialog.Portal></Dialog.Root>)}

Docs:clerk/clerk-docs#2896

Checklist

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

Type of change

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

@changeset-bot
Copy link

changeset-botbot commentedNov 25, 2025
edited
Loading

🦋 Changeset detected

Latest commit:fa6ef65

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

This PR includes changesets to release 19 packages
NameType
@clerk/sharedPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/chrome-extensionPatch
@clerk/clerk-jsPatch
@clerk/expo-passkeysPatch
@clerk/expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/localizationsPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/reactPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/uiPatch
@clerk/vuePatch

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
Copy link

vercelbot commentedNov 25, 2025
edited
Loading

The latest updates on your projects. Learn more aboutVercel for GitHub.

1 Skipped Deployment
ProjectDeploymentReviewUpdated (UTC)
clerk-js-sandboxSkippedSkippedDec 17, 2025 2:15pm

@coderabbitai
Copy link
Contributor

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the.coderabbit.yaml file in this repository. To trigger a single review, invoke the@coderabbitai review command.

You can disable this status message by setting thereviews.review_status tofalse in the CodeRabbit configuration file.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branchalexcarpenter/portal-provider-3

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

@alexcarpenter
Copy link
MemberAuthor

!snapshot

clerk-cookie reacted with heart emoji

@clerk-cookie
Copy link
Collaborator

Hey@alexcarpenter - the snapshot version command generated the following package versions:

PackageVersion

Tip: Use the snippet copy button below to quickly install the required packages.

@alexcarpenter
Copy link
MemberAuthor

!snapshot

clerk-cookie reacted with heart emoji

@clerk-cookie
Copy link
Collaborator

Hey@alexcarpenter - the snapshot version command generated the following package versions:

PackageVersion

Tip: Use the snippet copy button below to quickly install the required packages.

alexcarpenter reacted with confused emoji

@alexcarpenter
Copy link
MemberAuthor

!snapshot

clerk-cookie reacted with heart emoji

@clerk-cookie
Copy link
Collaborator

Hey@alexcarpenter - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.6-snapshot.v20251125180024
@clerk/astro2.16.4-snapshot.v20251125180024
@clerk/backend2.24.1-snapshot.v20251125180024
@clerk/chrome-extension2.8.7-snapshot.v20251125180024
@clerk/clerk-js5.111.1-snapshot.v20251125180024
@clerk/elements0.23.87-snapshot.v20251125180024
@clerk/clerk-expo2.19.7-snapshot.v20251125180024
@clerk/expo-passkeys0.4.23-snapshot.v20251125180024
@clerk/express1.7.54-snapshot.v20251125180024
@clerk/fastify2.6.6-snapshot.v20251125180024
@clerk/localizations3.28.6-snapshot.v20251125180024
@clerk/nextjs6.35.6-snapshot.v20251125180024
@clerk/nuxt1.13.4-snapshot.v20251125180024
@clerk/clerk-react5.57.1-snapshot.v20251125180024
@clerk/react-router2.3.1-snapshot.v20251125180024
@clerk/remix4.13.21-snapshot.v20251125180024
@clerk/shared3.36.1-snapshot.v20251125180024
@clerk/tanstack-react-start0.27.6-snapshot.v20251125180024
@clerk/testing1.13.20-snapshot.v20251125180024
@clerk/themes2.4.41-snapshot.v20251125180024
@clerk/types4.101.4-snapshot.v20251125180024
@clerk/vue1.17.1-snapshot.v20251125180024

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.6-snapshot.v20251125180024 --save-exact

@clerk/astro

npm i @clerk/astro@2.16.4-snapshot.v20251125180024 --save-exact

@clerk/backend

npm i @clerk/backend@2.24.1-snapshot.v20251125180024 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@2.8.7-snapshot.v20251125180024 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.111.1-snapshot.v20251125180024 --save-exact

@clerk/elements

npm i @clerk/elements@0.23.87-snapshot.v20251125180024 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.19.7-snapshot.v20251125180024 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@0.4.23-snapshot.v20251125180024 --save-exact

@clerk/express

npm i @clerk/express@1.7.54-snapshot.v20251125180024 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.6-snapshot.v20251125180024 --save-exact

@clerk/localizations

npm i @clerk/localizations@3.28.6-snapshot.v20251125180024 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@6.35.6-snapshot.v20251125180024 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@1.13.4-snapshot.v20251125180024 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.57.1-snapshot.v20251125180024 --save-exact

@clerk/react-router

npm i @clerk/react-router@2.3.1-snapshot.v20251125180024 --save-exact

@clerk/remix

npm i @clerk/remix@4.13.21-snapshot.v20251125180024 --save-exact

@clerk/shared

npm i @clerk/shared@3.36.1-snapshot.v20251125180024 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@0.27.6-snapshot.v20251125180024 --save-exact

@clerk/testing

npm i @clerk/testing@1.13.20-snapshot.v20251125180024 --save-exact

@clerk/themes

npm i @clerk/themes@2.4.41-snapshot.v20251125180024 --save-exact

@clerk/types

npm i @clerk/types@4.101.4-snapshot.v20251125180024 --save-exact

@clerk/vue

npm i @clerk/vue@1.17.1-snapshot.v20251125180024 --save-exact

@alexcarpenter
Copy link
MemberAuthor

!snapshot

clerk-cookie reacted with heart emoji

@clerk-cookie
Copy link
Collaborator

Hey@alexcarpenter - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20251215203425
@clerk/astro3.0.0-snapshot.v20251215203425
@clerk/backend3.0.0-snapshot.v20251215203425
@clerk/chrome-extension3.0.0-snapshot.v20251215203425
@clerk/clerk-js6.0.0-snapshot.v20251215203425
@clerk/dev-cli1.0.0-snapshot.v20251215203425
@clerk/expo3.0.0-snapshot.v20251215203425
@clerk/expo-passkeys1.0.0-snapshot.v20251215203425
@clerk/express2.0.0-snapshot.v20251215203425
@clerk/fastify2.6.9-snapshot.v20251215203425
@clerk/localizations4.0.0-snapshot.v20251215203425
@clerk/nextjs7.0.0-snapshot.v20251215203425
@clerk/nuxt2.0.0-snapshot.v20251215203425
@clerk/react6.0.0-snapshot.v20251215203425
@clerk/react-router3.0.0-snapshot.v20251215203425
@clerk/shared4.0.0-snapshot.v20251215203425
@clerk/tanstack-react-start1.0.0-snapshot.v20251215203425
@clerk/testing2.0.0-snapshot.v20251215203425
@clerk/ui1.0.0-snapshot.v20251215203425
@clerk/upgrade2.0.0-snapshot.v20251215203425
@clerk/vue2.0.0-snapshot.v20251215203425

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20251215203425 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20251215203425 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20251215203425 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20251215203425 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20251215203425 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20251215203425 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20251215203425 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20251215203425 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20251215203425 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20251215203425 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20251215203425 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20251215203425 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20251215203425 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20251215203425 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20251215203425 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20251215203425 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20251215203425 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20251215203425 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20251215203425 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20251215203425 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20251215203425 --save-exact

@alexcarpenter
Copy link
MemberAuthor

!snapshot

clerk-cookie reacted with heart emoji

@clerk-cookie
Copy link
Collaborator

Hey@alexcarpenter - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20251215210631
@clerk/astro3.0.0-snapshot.v20251215210631
@clerk/backend3.0.0-snapshot.v20251215210631
@clerk/chrome-extension3.0.0-snapshot.v20251215210631
@clerk/clerk-js6.0.0-snapshot.v20251215210631
@clerk/dev-cli1.0.0-snapshot.v20251215210631
@clerk/expo3.0.0-snapshot.v20251215210631
@clerk/expo-passkeys1.0.0-snapshot.v20251215210631
@clerk/express2.0.0-snapshot.v20251215210631
@clerk/fastify2.6.9-snapshot.v20251215210631
@clerk/localizations4.0.0-snapshot.v20251215210631
@clerk/nextjs7.0.0-snapshot.v20251215210631
@clerk/nuxt2.0.0-snapshot.v20251215210631
@clerk/react6.0.0-snapshot.v20251215210631
@clerk/react-router3.0.0-snapshot.v20251215210631
@clerk/shared4.0.0-snapshot.v20251215210631
@clerk/tanstack-react-start1.0.0-snapshot.v20251215210631
@clerk/testing2.0.0-snapshot.v20251215210631
@clerk/ui1.0.0-snapshot.v20251215210631
@clerk/upgrade2.0.0-snapshot.v20251215210631
@clerk/vue2.0.0-snapshot.v20251215210631

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20251215210631 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20251215210631 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20251215210631 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20251215210631 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20251215210631 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20251215210631 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20251215210631 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20251215210631 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20251215210631 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20251215210631 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20251215210631 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20251215210631 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20251215210631 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20251215210631 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20251215210631 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20251215210631 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20251215210631 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20251215210631 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20251215210631 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20251215210631 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20251215210631 --save-exact

@alexcarpenter
Copy link
MemberAuthor

!snapshot

clerk-cookie reacted with heart emoji

@clerk-cookie
Copy link
Collaborator

Hey@alexcarpenter - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20251215212157
@clerk/astro3.0.0-snapshot.v20251215212157
@clerk/backend3.0.0-snapshot.v20251215212157
@clerk/chrome-extension3.0.0-snapshot.v20251215212157
@clerk/clerk-js6.0.0-snapshot.v20251215212157
@clerk/dev-cli1.0.0-snapshot.v20251215212157
@clerk/expo3.0.0-snapshot.v20251215212157
@clerk/expo-passkeys1.0.0-snapshot.v20251215212157
@clerk/express2.0.0-snapshot.v20251215212157
@clerk/fastify2.6.9-snapshot.v20251215212157
@clerk/localizations4.0.0-snapshot.v20251215212157
@clerk/nextjs7.0.0-snapshot.v20251215212157
@clerk/nuxt2.0.0-snapshot.v20251215212157
@clerk/react6.0.0-snapshot.v20251215212157
@clerk/react-router3.0.0-snapshot.v20251215212157
@clerk/shared4.0.0-snapshot.v20251215212157
@clerk/tanstack-react-start1.0.0-snapshot.v20251215212157
@clerk/testing2.0.0-snapshot.v20251215212157
@clerk/ui1.0.0-snapshot.v20251215212157
@clerk/upgrade2.0.0-snapshot.v20251215212157
@clerk/vue2.0.0-snapshot.v20251215212157

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20251215212157 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20251215212157 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20251215212157 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20251215212157 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20251215212157 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20251215212157 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20251215212157 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20251215212157 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20251215212157 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20251215212157 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20251215212157 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20251215212157 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20251215212157 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20251215212157 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20251215212157 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20251215212157 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20251215212157 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20251215212157 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20251215212157 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20251215212157 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20251215212157 --save-exact

@alexcarpenteralexcarpenter changed the titlefeat(clerk-js): PortalProvider POCfeat(clerk-js): IntroduceUNSAFE_PortalProviderDec 15, 2025
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

@wobsorianowobsorianoAwaiting requested review from wobsoriano

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@clerk-cookie@wobsoriano

[8]ページ先頭

©2009-2025 Movatter.jp