{"enrichment":{"faq":[{"a":"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.","q":"What is HeroUI Native and how do I install it?"},{"a":"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.","q":"How do I build mobile UIs with HeroUI Native components?"},{"a":"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.","q":"What are the differences between HeroUI React and HeroUI Native?"},{"a":"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.","q":"How do I implement dark and light theming in HeroUI Native?"},{"a":"HeroUI Native employs compound component patterns where parent and child components work together\u2014for 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.","q":"What compound component patterns does HeroUI Native use?"},{"a":"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.","q":"How do I set up HeroUI Native with React Native and Expo?"}],"shadow_tags":["mobile-ui-kit","react-native-styling","compound-components","theme-customization","gesture-handling","semantic-design","expo-framework","accessibility-first","hsl-colors","ios-android-support"],"summary_rewrite":"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."},"files":[{"bytes":6955,"path":"skills/heroui-native/SKILL.md","sha256":"8237d7d29f3e2b39ca767dcb087550acb6960dba4e9d37fbe4ba606ef26b83f9","url":"https://skillfed.io/files/heroui-inc/heroui/heroui-native/cc576208/SKILL.md"}],"id":"heroui-inc/heroui/heroui-native","links":{"html":"https://skillfed.io/heroui-inc/heroui/heroui-native","md":"https://skillfed.io/heroui-inc/heroui/heroui-native.md","repo":"https://github.com/heroui-inc/heroui"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":2204,"language":"MDX","last_updated":"2026-07-28","license":"Apache-2.0","name":"heroui-native","publisher":"heroui-inc","stars":30221},"relations":{"similar":[{"id":"heroui-inc/heroui/heroui-react"},{"id":"heroui-inc/heroui/heroui-migration"},{"id":"ruchernchong/claude-kit/heroui"},{"id":"AkaraChen/aghub/heroui-react"},{"id":"hairyf/skills/uniwind"},{"id":"hairyf/skills/migrate-nativewind-to-uniwind"},{"id":"uni-stack/uniwind/migrate-nativewind-to-uniwind"},{"id":"uni-stack/uniwind/uniwind"},{"id":"gluestack/agent-skills/migrate-to-v5"},{"id":"pluginagentmarketplace/custom-plugin-react-native/react-native-animations"}]},"slug":{"owner":"heroui-inc","repo":"heroui","skill":"heroui-native"},"version":"cc576208"}