# Root

`Root` can be used to re render a component at the top level in the DOM tree. `Root.Provider` can be used to redefine the root level.

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

```jsx
import { Root } from '@aragon/ui'

function App() {
  return (
    <div>
      <p>Rendered in the current element</p>
      <Root>
        <p>Rendered at the root level of the DOM tree</p>
      </Root>
    </div>
  )
}
```

## Demonstration

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