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
Decision gist · record as of 2026-07-28
HeroUI Native provides accessible React Native UI components styled with Uniwind (Tailwind for mobile) for iOS and Android apps. 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.
Use it when
- HeroUI Native provides pre-built components like Buttons, Cards, TextFields, and Dialogs that you compose using compound component patterns.
- HeroUI Native targets React Native for mobile (iOS/Android), while HeroUI React is for web browsers.
Verify before relying
Read SKILL.md below before installing (6 files). Open directory: indexed for reading, not audited.
Install
heroui-inc/heroui/heroui-native · repository language: MDX
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build mobile UIs with HeroUI Native components and Uniwind styling”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
HeroUI v3 is a React component library built on Tailwind CSS v4 and React Aria, offering accessible, composable UI elements like Buttons, Modals, Forms, and Cards. It uses compound components (dot-notation subcomponents), semantic variants for intent-driven styling, and CSS variable theming with oklch color space—no provider required. Always fetch component docs before implementing to access complete examples and API references.
This skill guides agents through upgrading HeroUI v2 applications to v3, addressing breaking changes like compound components, removed Provider requirements, and event handler renaming. It provides migration workflows for both full and incremental approaches, component-specific guides, and styling updates to keep projects functional during the transition.
HeroUI v3 provides a component library for React built on Tailwind CSS v4 and React Aria, emphasizing accessibility and semantic design. Set up in Next.js or Vite, use compound components without a provider, and customize with CSS variables and design tokens. Access component docs, source code, and theme utilities via included scripts.
HeroUI v3 is a React component library combining Tailwind CSS v4 and React Aria to deliver accessible, customizable UI elements. Build with compound components like Card.Header and Card.Content, semantic variants, and CSS variable theming in oklch color space—no provider needed.
NativeWind brings Tailwind CSS styling to React Native, compiling utilities for both web and native platforms. It supports responsive design, dark mode, platform-specific variants, and pseudo-classes like hover and focus. Configure via CSS-first setup with custom themes and utilities.
This skill guides you through building and maintaining modern UI design systems using TailwindCSS for styling, Radix UI for accessible primitives, and shadcn/ui for pre-built components. It covers component architecture, design tokens, responsive layouts, dark mode, and accessibility compliance to create consistent, reusable interfaces.