Chapter 39: Portal (Utility)

Core Idea

Renders a React subtree into a different part of the DOM (by default document.body) — the low-level mechanism every overlay primitive (Dialog, Popover, DropdownMenu, Tooltip, etc.) uses to escape parent stacking-context/overflow constraints.

Key Concepts

• container prop: choose a target DOM element other than document.body (e.g. a specific app root, or a shadow-DOM host).
• Single part: Portal.Root — wrap anything you want rendered outside its logical React-tree position in the DOM.

Key Takeaways

1. You rarely need this directly — nearly every Radix overlay primitive already wraps its own Content in a Portal internally, exposed as that component's own Portal part.
2. Reach for the standalone Portal primitive when building your own overlay-style component that needs the same DOM-escape behavior.
3. Use container when the default document.body target doesn't work for your app's DOM structure (e.g. rendering inside a specific modal-root div, or into a web component's shadow root).

Connects To

• Every overlay primitive (Dialog, Popover, DropdownMenu, ContextMenu, HoverCard, Tooltip, Select, Toast): all expose their own Portal part built on this utility.