HeroUI Native Pro
Install and configure heroui-native-pro in a HeroUI Native project
This article was written by a human (md) and optimized by AI (mdx).
This guide assumes you have already completed the HeroUI Native project initialization. Please set up the base project first.
Installation
Install heroui-native-pro (full version) in interactive mode:
Before you begin, it's a good idea to initialize git and commit your changes so you can easily see what the installation modifies.
The installation process automatically handles react-native dependencies. If a local cache already exists (~/.heroui/cache/react-native/{version}), it will be used; otherwise, the dependencies are downloaded from the CDN and cached. On subsequent installs, the same version will be served directly from the local cache unless you manually clear it.
Configuration
After installation, you need to import the Pro styles and component sources in your global stylesheet.
Import Pro Styles
Add the heroui-native-pro style import and component source scan to global.css:
@import 'tailwindcss';
@import 'uniwind';
@import 'heroui-native/styles';
@import 'heroui-native-pro/styles';
@source './node_modules/heroui-native/lib';
@source './node_modules/heroui-native-pro/lib';The @source paths are relative to the global.css file. If global.css is not in the project root (for example, inside app/), adjust the paths to ../node_modules/heroui-native-pro/lib.
Usage
Create a Pro Component
Create a component file in the components directory to use Pro components:
import { Stepper } from 'heroui-native-pro';
import { View } from 'react-native';
export default function MyComponent() {
return (
<View className="flex-1 justify-center bg-background p-4">
<Stepper>
<Stepper.Step>
<Stepper.Rail />
<Stepper.Content>
<Stepper.Title>Account</Stepper.Title>
<Stepper.Description>Create your account</Stepper.Description>
</Stepper.Content>
</Stepper.Step>
<Stepper.Step>
<Stepper.Rail />
<Stepper.Content>
<Stepper.Title>Profile</Stepper.Title>
<Stepper.Description>Set up your profile</Stepper.Description>
</Stepper.Content>
</Stepper.Step>
</Stepper>
</View>
);
}Replace the Home Screen Content
Import and use the component in the home screen (the path varies depending on your project structure, typically src/app/(home)/index.tsx):
import MyComponent from '@/src/components/my-component';
// Replace the View section inside ScreenScrollView
<MyComponent />
Update the Template
After installation, you can update the current project to a template (this will overwrite the existing template) for direct use next time:
p tp update .p template update .p templates update .
Publish to Remote
You can also publish the template to a remote repository so others can clone and use it:
p tp publish .p template publish .p templates publish .
How is this guide?
Last updated on