skills.rest
trungenglish
trungenglishCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

heroui-native

Build React Native mobile UIs with HeroUI Native components and Uniwind theming.

1|Updated Jul 4, 2026
Search Tags:#theming#component library#tailwind#react native#heroui-native#uniwind#mobile ui
One-click install
npx skills add https://github.com/trungenglish/SHOPWISE --skill heroui-native-trungenglish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: heroui-native
Source: https://github.com/trungenglish/SHOPWISE/tree/main/.agents/skills/heroui-native
Command: npx skills add https://github.com/trungenglish/SHOPWISE --skill heroui-native-trungenglish

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Building mobile interfaces in React Native requires correct component usage, theming, and setup that differ significantly from web patterns, and applying web-based HeroUI conventions leads to broken styling and incorrect event handling. ## Core Features & Use Cases - Component Documentation Access: Fetch complete MDX documentation for HeroUI Native components like Button, Card, TextField, and Dialog, including props, anatomy, and examples. - Theme Variable Retrieval: Pull light and dark mode theme variables in HSL color format for configuring Uniwind-based theming in global.css. - Setup Guidance: Provides installation steps, provider wrapping (HeroUINativeProvider, GestureHandlerRootView), and compound component patterns for Expo projects. - Use Case: When building a settings screen in an Expo app, use this Skill to fetch the Card and TextField component docs, apply semantic variants like primary and danger, and configure dark mode switching via Uniwind. ## Quick Start Use the heroui-native skill to fetch the Button component documentation and show me how to add a primary action button to my Expo app.

Frequently Asked Questions about heroui-native

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install HeroUI Native in an Expo project?▼

Install heroui-native with uniwind and tailwindcss, plus peer dependencies like react-native-reanimated, react-native-gesture-handler, react-native-safe-area-context, @gorhom/bottom-sheet, and react-native-svg. Then create a global.css importing tailwindcss, uniwind, and heroui-native styles.

How do I get HeroUI Native component documentation?▼

Run node scripts/list_components.mjs to see all components, then node scripts/get_component_docs.mjs Button to fetch full MDX docs with props, anatomy, and examples. Docs are also available directly at heroui.com/docs/native/components/{component-name}.mdx.

What is the difference between HeroUI React and HeroUI Native?▼

HeroUI React targets web browsers using Tailwind CSS v4 and oklch colors via the @heroui/react package. HeroUI Native targets iOS and Android using Uniwind, HSL color format, the heroui-native package, and onPress handlers instead of onClick.

How do I configure dark mode in HeroUI Native?▼

Define theme colors as HSL CSS variables in global.css under @theme, then use Uniwind.setTheme with useUniwind to toggle between light and dark. Run node scripts/get_theme.mjs to retrieve the current theme variables for both modes.

Why is my HeroUI Native app not rendering components correctly?▼

Components fail when the app is not wrapped in both GestureHandlerRootView and HeroUINativeProvider, or when global.css is missing the heroui-native styles import and @source directive. Verify all peer dependencies like react-native-reanimated are installed.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

expo-ui-swift-ui

Implements SwiftUI views and modifiers in Expo React Native apps using @expo/ui.

Official
Basic
rostiSerostiSe
1

expo-deployment

Automates Expo app builds, signings, and submissions to Apple and Google via EAS.

Community
Advanced
heaptracetechnologyheaptracetechnology
13

mobile-ui

Build platform-adaptive mobile UI components across React Native, Flutter, and SwiftUI.

Community
Advanced
tamaguitamagui
14.1k

tamagui

Guide Tamagui design system usage with tokens, themes, and component patterns.

Official
Intermediate