Add support for custom portal container in floating components (Dialog, Dropdown, Popover, etc.) #3698
Replies: 2 comments
-
Came here to post this one to. While there are 99% of case where you want portal on body, there are some cases, specifically due to design compromise, where it is necessary to display a drawer for exemple into a container and this is almost impossible or highly inconvenient to do in css. Having the ability to define a container for the portal in those rare case would be a big win. EDIT : #666 |
Beta Was this translation helpful? Give feedback.
-
Thanks for your input, @Crocsx — totally agree on the value of supporting custom portal containers. Unfortunately, it seems like Headless UI isn’t actively maintained anymore, or at least issues like this don’t get much attention. That’s been my experience so far, especially working on browser extensions where Shadow DOM and strict container control are essential. In contrast, libraries like shadcn/ui handle these use cases much better by exposing portal container props out of the box. For anyone building extensions or apps in non-standard environments, I’d honestly recommend exploring alternatives — Headless UI just doesn’t offer the flexibility or responsiveness needed in those scenarios. Still hoping the maintainers take another look at this, but in the meantime, shadcn/ui has been a far smoother experience. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi, First of all, thank you for your amazing work on Headless UI.
I'm working on a browser extension project where the app is rendered inside a shadow DOM.
In this context, it's important to have control over where portals are mounted.
Currently, libraries like shadcn/ui and Hero UI allow passing a custom container to their portal components (e.g., Dialogs, Dropdowns, Popovers, Listboxes).
However, Headless UI's floating components currently hardcode the portal target (typically document.body) without exposing a way to override it.
Since Headless UI is meant to be "headless", it would be great to allow developers to specify a custom container for portals.
This would make the library even more flexible and suitable for advanced use cases like Shadow DOM.
Thank you for considering this feature request!
Beta Was this translation helpful? Give feedback.
All reactions