# Portal

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

- Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular`
- Docs: https://www.sisyphosui.com/docs/components/portal

## Installation

Pick the framework binding that matches your stack:

```bash
pnpm add @sisyphos-ui/react   # React 18+
pnpm add @sisyphos-ui/vue     # Vue 3+
pnpm add @sisyphos-ui/angular # Angular 17+
```

## Import

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

## Framework usage

### React 18+

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

export const Floating = () => (
  <Portal>
    <div className="floating">I render at document.body</div>
  </Portal>
);
```

### Vue 3+

```ts
// Portals in @sisyphos-ui/vue are wired automatically inside
// every overlay (Dialog, Popover, Tooltip, DropdownMenu, …).
// You usually don't need to import Portal directly.
```

### Angular 17+

```ts
// Portals in @sisyphos-ui/angular are wired automatically inside
// every overlay (Dialog, Popover, Tooltip, DropdownMenu, …).
// You usually don't need to import Portal directly.
```

## Examples

### Default

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

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

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>
    </>
  );
}
```

<!-- exports: { "Portal": "@sisyphos-ui/react" } -->