# 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

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-9e28d62c19c3a003f9f0d09dd2a69433f531ad29%2FSchermata%202022-06-26%20alle%2021.20.30.png?alt=media)

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