> For the complete documentation index, see [llms.txt](https://legacy-docs.aragon.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://legacy-docs.aragon.org/developers/tools/aragonui/advances/rootportal.md).

# RootPortal

Render a component at the root level of the aragonUI app. This is useful for tooltips, modals, or any other element that requires to be rendered on top of the other elements.

## Usage <a href="#usage" id="usage"></a>

```jsx
import { Main, RootPortal } from '@aragon/ui'

const App = () => (
  <Main>
    <ul>
      <li>
        <p>This gets rendered here in the DOM tree.</p>

        <RootPortal>
          <p>This gets rendered at the level of Main in the DOM tree.</p>
        </RootPortal>
      </li>
    </ul>
  </Main>
)
```

## Demonstration

![](/files/OQdnXhvwRyMwwVpNZmYv)

## Props <a href="#props" id="props"></a>

#### `children` <a href="#children" id="children"></a>

* Type: React node
* Required

Pass anything here and it will get rendered at the `<Root />` level.