Portal
Renders its children above the app, out of the layout they are written in: for your own floating bars, panels and overlays.A bar over the page
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Portal } from '@advui/core'
<Portal zIndex="overlay">
<Card position="absolute" bottom="4" left="4" right="4">…</Card>
</Portal>API reference
Portal
Tamagui’s Portal, with a layer that lets touches outside the children reach the app. Place the children with `position="absolute"`.| Prop | Type | Default | Description |
|---|---|---|---|
zIndex | PortalLayer | number | 'overlay' | A layer of the theme’s `zIndex` scale (`dropdown`, `sticky`, `overlay`, `modal`, `popover`, `toast`, `tooltip`) or a number. Android takes 32-bit z-indices only. |
Accessibility
- Content moves to the end of the page on web and beside the app on iOS and Android, so screen readers and the Tab key reach it last. Keep it for content that floats above the page.
- A Portal is not a dialog: it does not trap focus or hide the page behind it. For modal content use Dialog, Drawer or Sheet, which do.
Platform notes
Web
Renders after hydration, at the end of
body, so it is not in the server-rendered HTML.iOS
Renders beside the app. React context from above the Portal does not reach its children (the theme does): pass values as props.
Android
Renders beside the app. React context from above the Portal does not reach its children (the theme does): pass values as props.