Portal

Installation

npx shadcn@latest add @tetra-ui/portal

Usage

import { PortalHost } from "@/components/ui/portal";
import { ScrimHost, ScrimTarget } from "@/components/ui/scrim";

export default function RootLayout() {
  return (
    <ScrimHost>
      <ScrimTarget>
        <Stack />
      </ScrimTarget>
      <PortalHost />
    </ScrimHost>
  );
}

ThemeProvider already mounts this structure.

When to use

Add PortalHost once at the root of your app, as a sibling of ScrimTarget. Components that render into a portal — such as Select (popover mode) and Popover — require it to display content above the rest of the UI. Scrim uses the same host so portaled overlays can blur the screen behind them.

Place PortalHost as a sibling to your navigation stack, not inside individual screens.

API Reference

PortalHost

Mount point where portal content is rendered. Place once at the app root.

Portal

Renders null in place. Injects children into the matching PortalHost.

PortalWindow

Platform window wrapper used by portaled UI: FullWindowOverlay on iOS, Fragment elsewhere. Not a dimmer — use Scrim for that.