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

# Portal provider

Graphy renders some elements outside of its root container using React portals. These include the annotations menu, text editor toolbar, tooltips and other overlay components.

By default, these portal elements render into the document body. Use `PortalProvider` to specify a custom container instead, which is useful for modals, z-index control or CSS containment.

## Basic usage

Wrap your `GraphProvider` with `PortalProvider`. All portal elements will be rendered as children of the `PortalProvider`.

```tsx theme={null}
import { GraphProvider, Graph, PortalProvider } from '@graphysdk/core';

<PortalProvider>
  <GraphProvider>
    <Graph />
  </GraphProvider>
  {/* portal elements will be rendered here */}
</PortalProvider>;
```

## Props

| Prop        | Description                                   |
| ----------- | --------------------------------------------- |
| `children`  | React children to render inside the provider  |
| `as`        | Element type to render as (defaults to `div`) |
| `className` | CSS class name for styling                    |

## Styling

By default, `PortalProvider` applies `display: contents` to avoid affecting layout. When you pass a `className`, you control the styling completely:

```tsx theme={null}
<PortalProvider className="relative z-50">
  <GraphProvider config={config} onChange={setConfig}>
    <Graph />
  </GraphProvider>
</PortalProvider>
```

## Common use cases

**Modals and dialogs** – Prevent portal elements from appearing behind modal overlays:

```tsx theme={null}
<Modal className="z-50">
  <PortalProvider>
    <GraphProvider config={config} onChange={setConfig}>
      <Graph />
    </GraphProvider>
  </PortalProvider>
</Modal>
```

**Custom containers** – Render portals in a specific DOM element:

```tsx theme={null}
<PortalProvider as="section" className="graph-portal-container">
  <GraphProvider config={config} onChange={setConfig}>
    <Graph />
  </GraphProvider>
</PortalProvider>
```