Components should be inserted before closing body tag - outside of the main content

[xairoo]

Just trying to move from Ant Design to Headless UI and run into a problem:

When using popover, menu, ... the code will appear in the DOM next to the button.
This can be a big problem. If you place a Headless UI component inside a a tag, the link will just wrap around the toggled component. That's a bad UX because the client can still see the link in the browser. Sure, you can use e.preventDefault(), but you still see it.

Ant Design, Material UI, ... insert the code directly above the </body> tag, that's get.

Anyway, Headless UI looks like a stylish and great way to replace Ant Design, Material UI, ... in the future.

[adamwathan]

Hey! You can do this if you like no problem by using a Portal. Headless UI is pretty low level and we've tried to design it to compose well with things that already exist. Headless UI works great with Popper.js for example as well.

[xairoo]

That's amazing! Didn't know Portals yet :-) Works perfectly, thanks!