Portal

Renders its children into a DOM node outside the parent component hierarchy - the document body by default. Used by overlay components (Modal, Drawer) so their content escapes ancestor overflow/transform/stacking contexts.

Resolution is synchronous during render, so the portaled content mounts in the same commit as the <Portal> - consumers can rely on their root ref being attached before their effects run. On the server (no document) it renders nothing.

Examples

Default

Switch the target control to move the portaled banner between the document body and the bordered box below.

Custom container
const args: Partial<PortalProps> = { target: 'container' }

<PortalDemo {...args} />

Portal API reference