Composition | HeroUI Pro

HeroUI Native uses the same composition patterns as HeroUI Native OSS — compound components with dot notation, the asChild prop for polymorphic rendering, and custom variants via tailwind-variants.

Read the full Composition guide on heroui.com to learn about compound components, the asChild prop, custom components, and custom variants.

Pro components use the same compound component pattern with dot notation:

import { Stepper } from 'heroui-native-pro';

<Stepper>
  <Stepper.Step>
    <Stepper.Rail>
      <Stepper.Indicator>
        <Stepper.IndicatorCheck />
        <Stepper.IndicatorNumber />
      </Stepper.Indicator>
      <Stepper.Separator>
        <Stepper.SeparatorTrack />
        <Stepper.SeparatorFill />
      </Stepper.Separator>
    </Stepper.Rail>
    <Stepper.Content>
      <Stepper.Title>Account</Stepper.Title>
      <Stepper.Description>Create your account</Stepper.Description>
    </Stepper.Content>
  </Stepper.Step>
</Stepper>

And the same asChild prop for polymorphic rendering:

import { DatePicker } from 'heroui-native-pro';
import { Button } from 'heroui-native';

<DatePicker>
  <DatePicker.Select>
    <DatePicker.Trigger asChild>
      <Button variant="tertiary">Pick a date</Button>
    </DatePicker.Trigger>
  </DatePicker.Select>
</DatePicker>

See each component's documentation for the full compound component anatomy.