> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Portal

> The `Portal` component allows projection of content into different parts of the DOM.

<iframe
  src={`https://ui-kit-docs-embed.vercel.app/player/portal`}
  height="600px"
  width="100%"
  frameBorder="0"
  allowFullScreen
  allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
  style={{
borderRadius: 10,
backgroundColor: "black",
}}
/>

<Info>
  The `Portal` component is a simple wrapper over
  [@radix-ui/react-portal](https://www.radix-ui.com/primitives/docs/utilities/portal#portal).
  It inherits all of the documentation for the component.
</Info>

## Features

* Provides an easy way to portal controls out of the Root components

## Anatomy

Import the components and piece the parts together.

```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import * as Player from "@livepeer/react/player";

export default () => (
  <Player.Root>
    <Player.Portal>
      {/* Place portalled elements here, which can still 
      consume the React Context from the Root, but are
      appended to the document */}
    </Player.Portal>
  </Player.Root>
);
```

## Props

### `children`

React nodes that are to be rendered inside the portal.

### `container`

An optional prop specifying a container element where the portal's children
should be rendered. If not provided, the children are appended to the body of
the document by default.