Utilities

Portal

Renders a React subtree in a different part of the DOM.

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 * as Portal from "@radix-ui/react-portal";
export default () => <Portal.Root />;

Basic example

Use the portal primitive.

import * as Portal from "@radix-ui/react-portal";
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.

PropTypeDefault
asChild
boolean
false
container
HTMLElement
No default value
PreviousPolymorphic
NextSlot