Radix homepageRadix Homepage
PrimitivesAlpha

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.

Install the component from your command line.

npm install @radix-ui/react-portal

Import the component.

import * as Portal from '@radix-ui/react-portal';
export default () => <Portal.Root />;

Use the portal primitive.

import * as Portal from '@radix-ui/react-portal';
export default () => <Portal.Root>Content</Portal.Root>;

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

PropTypeDefault
containerRefrefNo default value