heroui-native
HeroUI Native is a component library for React Native built on Uniwind (Tailwind CSS adapted for mobile) and React Native, delivering accessible, customizable UI components for iOS and Android. Use compound component patterns to compose Buttons, Cards, TextFields, Dialogs, and more with semantic variants and HSL-based theming. Always fetch component documentation before implementing to access complete examples, props, and API references.
HeroUI Native provides accessible React Native UI components styled with Uniwind (Tailwind for mobile) for iOS and Android apps.
AI-generated summary based on this skill's SKILL.md
Install
heroui-inc/heroui/heroui-native · repository language: MDX
git clone https://github.com/heroui-inc/heroui
cp -r heroui/skills/heroui-native ~/.claude/skills/heroui-nativenpx skillfed install heroui-inc/heroui/heroui-nativeFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is HeroUI Native and how do I install it?
HeroUI Native is a component library for React Native built on Uniwind (Tailwind CSS adapted for mobile) that delivers accessible, customizable UI components for iOS and Android. To install heroui-native, add it to your React Native project via npm or yarn, then wrap your app with the HeroUI Provider to enable theming and component context. Always fetch component documentation before implementing to access complete examples, props, and API references.
How do I build mobile UIs with HeroUI Native components?
HeroUI Native provides pre-built components like Buttons, Cards, TextFields, and Dialogs that you compose using compound component patterns. Style them with Uniwind (Tailwind CSS for React Native) utility classes for responsive, accessible layouts. The library's semantic variants let you express intent (primary, secondary, danger) while HSL-based theming ensures consistent color across your app. Refer to documentation for each component's complete API and usage examples.
What are the differences between HeroUI React and HeroUI Native?
HeroUI Native targets React Native for mobile (iOS/Android), while HeroUI React is for web browsers. HeroUI Native uses Uniwind for styling instead of standard Tailwind CSS, leverages React Native's gesture handlers for interactions, and provides mobile-optimized components. Both share compound component patterns and HSL theming concepts, but APIs differ to match each platform's capabilities and constraints.
How do I implement dark and light theming in HeroUI Native?
HeroUI Native supports dark/light theming through HSL-based color customization. Configure your theme colors in the Provider setup, defining semantic tokens (primary, secondary, danger) as HSL values. The library automatically applies the correct palette based on the system's appearance setting or your app's theme preference. Customize component colors by passing variant props and leveraging Uniwind utility classes for fine-grained control.
What compound component patterns does HeroUI Native use?
HeroUI Native employs compound component patterns where parent and child components work together—for example, a Dialog wraps DialogHeader, DialogBody, and DialogFooter. This pattern gives you flexibility to compose complex UIs while maintaining clean APIs. Each compound component exposes semantic variants and props for styling and behavior. Documentation provides detailed examples of all available compounds and their composition rules.
How do I set up HeroUI Native with React Native and Expo?
To set up heroui-native in an Expo or React Native project, install the package, configure Uniwind for Tailwind CSS support on mobile, and wrap your root component with the HeroUI Provider. Ensure React Native gesture handlers are installed for interactive components. The Provider initializes theming context and enables dark/light mode support. Check the documentation for platform-specific setup steps and any required peer dependencies.
SKILL.md
rendered from the published skill — quoted content, verbatim
HeroUI Native Development Guide
HeroUI Native is a component library built on Uniwind (Tailwind CSS for React Native) and React Native, providing accessible, customizable UI components for mobile applications.
Installation
curl -fsSL https://heroui.com/install | bash -s heroui-native
CRITICAL: Native Only - Do Not Use Web Patterns
This guide is for HeroUI Native ONLY. Do NOT apply HeroUI React (web) patterns — the package, styling engine, and color format all differ:
| Feature | React (Web) | Native (Mobile) |
|---|---|---|
| Styling | Tailwind CSS v4 | Uniwind (Tailwind for React Native) |
| Colors |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 6 files
skills/heroui-native/LICENSE.txt
skills/heroui-native/SKILL.md
skills/heroui-native/scripts/get_component_docs.mjs
skills/heroui-native/scripts/get_docs.mjs
skills/heroui-native/scripts/get_theme.mjs
skills/heroui-native/scripts/list_components.mjs