tetra-ui Logotetra ui

Portal

Renders children into a different part of the app.

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), Popover, and Bottom Sheet — require it to display content above the rest of the UI.

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

On this page