Portal

Installation

npx shadcn@latest add @tetra-ui/portal

Usage

import { PortalHost } from "@/components/ui/portal";

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

When to use

Add PortalHost once at the root of your app. Components that render into a portal — such as Select (popover mode) and Popover — require it to display content above the rest of the UI.

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.

PortalOverlay

Platform wrapper used by overlays: FullWindowOverlay on iOS, Fragment elsewhere.