# Portal

> Renders children to a dedicated root outside the parent DOM tree. Used by every overlay primitive.

- Package: `@sisyphos-ui/portal`
- Docs: https://sisyphosui.com/docs/components/portal
- npm: https://www.npmjs.com/package/@sisyphos-ui/portal

## Installation

```bash
pnpm add @sisyphos-ui/portal @sisyphos-ui/core
```

Or use the umbrella package:

```bash
pnpm add @sisyphos-ui/ui
```

## Import

```tsx
import "@sisyphos-ui/portal/styles.css";
import { Portal } from "@sisyphos-ui/portal";
```

## Examples

### Default

Render children into `document.body` (or any element/selector). SSR-safe.

```tsx
import { Portal } from "@sisyphos-ui/ui";

export function Example() {
  return (
    <>
      <p className="text-sm text-neutral-500">
        Children below render into a Portal attached to <code>document.body</code>.
        Open the element inspector to see them outside this section.
      </p>
      <Portal>
        <div
          style={{
            position: "fixed",
            bottom: 16,
            right: 16,
            zIndex: 9999,
            background: "var(--sisyphos-color-primary)",
            color: "#fff",
            padding: "6px 12px",
            borderRadius: 8,
            fontSize: 12,
          }}
        >
          rendered via Portal
        </div>
      </Portal>
    </>
  );
}
```