Portal

<Highlights features={[ "Render any React subtree outside of your App.", "Appends to document.body by default but can be customized to use a different container.", ]} />

Installation

Install the component from your command line.

npm install @radix-ui/react-portal

Anatomy

Import the component.

import { Portal } from "radix-ui";

export default () => <Portal.Root />;

Basic example

Use the portal primitive.

import { Portal } from "radix-ui";

export default () => <Portal.Root>Content</Portal.Root>;

API Reference

Root

Anything you put inside this component will be rendered in a separate <div> element. By default, this element will be appended to document.body but you can choose a different container by using the container prop.

<PropsTable data={[ { name: "asChild", required: false, type: "boolean", default: "false", description: ( <> Change the default rendered element for the one passed as a child, merging their props and behavior.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "container",
		type: "HTMLElement",
		description:
			"A optional different container where the portaled content should be appended.",
	},
]}

/>