Beautiful, fast and modern React Native UI library

v1.0.0-alpha.13

Preview App

Experience HeroUI Native components in action with our preview app! You can explore all components and their variants directly on your device.

Prerequisites

Make sure you have the latest version of Expo Go installed on your mobile device.

How to Access

Choose one of the following methods to access the preview app:

Option 1: Scan the QR Code

Use your device's camera or Expo Go app to scan:

Note for Android users: If scanning the QR code with your device's camera or other scanner apps redirects to a browser and shows a 404 error, open Expo Go first and use its built-in QR scanner instead.

Option 2: Click the Link

📱 Open Demo App in Expo Go

This will automatically open the app in Expo Go if it's installed on your device.

Quick Start with Example App

Want to start building with HeroUI Native immediately? We provide a standalone example app that's fully configured and ready to use:

🚀 HeroUI Native Example App

This repository contains a pre-configured React Native app with HeroUI Native already set up, including:

• All necessary dependencies installed
• Nativewind configuration ready
• Example components showcasing best practices
• Perfect for quickly prototyping or starting a new project

Simply clone, install, and start building!

Getting Started

1. Install HeroUI Native

npm install heroui-native

2. Install Mandatory Peer Dependencies

npm install react-native-screens react-native-reanimated@~4.1.0 react-native-safe-area-context@5.6.0 react-native-svg@^15.12.1 tailwind-variants@^3.1.0 tailwind-merge@^3.3.1

Important: It's recommended to use the exact versions specified above to avoid compatibility issues. Version mismatches may cause unexpected bugs.

3. Set Up Nativewind

Follow the NativeWind installation guide to set up Tailwind CSS for React Native.

Important: For correct compatibility with Reanimated v4, you must install NativeWind v4.2.1 specifically. This is crucial for proper functionality.

4. Configure Tailwind

Update your tailwind.config.js to include the HeroUI Native plugin:

import heroUINativePlugin from 'heroui-native/tailwind-plugin';

module.exports = {
  content: [
    './app/**/*.{js,jsx,ts,tsx}',
    './node_modules/heroui-native/lib/**/*.{js,ts,jsx,tsx}',
  ],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {},
  },
  plugins: [heroUINativePlugin],
};

Important: Import the tailwind plugin from heroui-native/tailwind-plugin and not from heroui-native.

Important: The './node_modules/heroui-native/lib/**/*.{js,ts,jsx,tsx}' path is crucial for Tailwind to process the library's component styles. Without it, HeroUI Native components won't be styled correctly.

5. Wrap Your App with Provider

Wrap your application with HeroUINativeProvider:

import { HeroUINativeProvider } from 'heroui-native';

export default function App() {
  return <HeroUINativeProvider>{/* Your app content */}</HeroUINativeProvider>;
}

6. Use Your First Component

import { Button } from 'heroui-native';
import { View } from 'react-native';

export default function MyComponent() {
  return (
    <View className="flex-1 justify-center items-center bg-background">
      <Button onPress={() => console.log('Pressed!')}>Get Started</Button>
    </View>
  );
}

Documentation

Core

• Provider Configuration - Complete setup and configuration guide
• Theming - Theme customization, colors, and dark mode
• Custom Fonts - How to use custom fonts with HeroUI Native

Components

• Accordion
• Avatar
• Button
• Card
• Checkbox
• Chip
• Dialog
• Divider
• Drop Shadow View
• Error View
• Form Field
• Radio
• Radio Group
• Scroll Shadow
• Skeleton
• Skeleton Group
• Spinner
• Surface
• Switch
• Text Field

Changelog

See CHANGELOG.md for a history of changes to this library.

Roadmap

See Roadmap to see what we're working on.

Community

We're excited to see the community adopt HeroUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

• Discord
• X
• GitHub Discussions

Contributing

Contributions are always welcome! We appreciate your help in making HeroUI Native better.

How to Contribute

• Bug Fixes: Check our GitHub Issues for bugs that need fixing
• New Components: Only core team can add new components. Check our Roadmap to see what's planned
• Feature Proposals: Start a discussion in GitHub Discussions before implementing

Important: Please do not add new components or variants, change existing designs, or modify component behavior without prior discussion. We follow a strict design system based on our Figma designs and roadmap.

For detailed guidelines, see CONTRIBUTING.md.

Please adhere to this project's CODE_OF_CONDUCT.

License

MIT