Portal | HeroUI Pro

HeroUI Native Pro components use the same portal system as HeroUI Native OSS — PortalHost is included in HeroUINativeProvider by default, and overlay-based components render through portals automatically.

Read the full Portal guide on heroui.com to learn about the default setup, custom portal hosts, state management considerations, and the Portal / PortalHost API reference.

Pro components that use overlays (like DatePicker) include a .Portal sub-component in their compound anatomy:

import { DatePicker } from 'heroui-native-pro';
import { Calendar, Label } from 'heroui-native';

<DatePicker>
  <Label>Event date</Label>
  <DatePicker.Select>
    <DatePicker.Trigger>
      <DatePicker.Value />
      <DatePicker.TriggerIndicator />
    </DatePicker.Trigger>
    <DatePicker.Portal>
      <DatePicker.Overlay />
      <DatePicker.Content presentation="popover" width="trigger">
        <DatePicker.Calendar>
          <Calendar.Header />
          <Calendar.Grid />
        </DatePicker.Calendar>
      </DatePicker.Content>
    </DatePicker.Portal>
  </DatePicker.Select>
</DatePicker>