Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Portal

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

Features

Render any Solid subtree outside of your App.
Appends to `document.body` by default but can be customized to use a different container.

Anatomy

Import the component.

import { Portal } from "@radix-solid/primitives";
export default () => <Portal.Root />;

Basic example

Use the portal primitive.

import { Portal } from "@radix-solid/primitives";
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.

Prop	Type	Default
`asChild`	`boolean`	`false`
`container`	`HTMLElement`	—