> 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.

```jsx
import { Portal } from "@radix-solid/primitives";

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

## Basic example

Use the portal primitive.

```jsx
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`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean`     | `false` |
| `container`A optional different container where the portaled content should be appended.                                                                                | `HTMLElement` | —       |