Theming | HeroUI Pro

HeroUI Native Pro components use the exact same theming system as HeroUI Native OSS — CSS variables via Uniwind, automatic light/dark switching, custom themes, custom colors, and custom fonts. No additional theming configuration is needed for Pro components.

Read the full Theming guide on heroui.com to learn about color overrides, creating custom themes, adding custom colors, custom fonts, the variables reference, and calculated theme utilities.

Any theme customization you make in your global.css applies to both OSS and Pro components equally:

/* global.css — applies to all OSS and Pro components */
@layer theme {
  @variant light {
    --accent: oklch(0.65 0.25 270);
  }

  @variant dark {
    --accent: oklch(0.65 0.25 270);
  }
}

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

<Stepper>
  <Stepper.Step>
    <Stepper.Rail />
    <Stepper.Content>
      <Stepper.Title>Account</Stepper.Title>
    </Stepper.Content>
  </Stepper.Step>
</Stepper>

<Button variant="primary">
  <Button.Label>Submit</Button.Label>
</Button>