Styling | HeroUI Pro

HeroUI Native Pro components use the exact same styling system as HeroUI Native OSS — className with Tailwind CSS utilities via Uniwind, the style prop, render props, tailwind-variants for custom variants, exported classNames objects, the cn utility, and useThemeColor. No additional styling setup is needed for Pro components.

Read the full Styling guide on heroui.com to learn about styling principles, basic styling, render props, wrapper components, component classNames, responsive design, the cn utility, and the useThemeColor hook.

Pro components accept the same className and style props as OSS components:

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

<Stepper className="px-4">
  <Stepper.Step>
    <Stepper.Rail />
    <Stepper.Content>
      <Stepper.Title className="text-lg font-semibold">Account</Stepper.Title>
      <Stepper.Description className="text-muted">
        Create your account
      </Stepper.Description>
    </Stepper.Content>
  </Stepper.Step>
</Stepper>