skills.rest
Chia1104
Chia1104COMMUNITY
Explore all skills by this author →
Website𝕏@chia7423GitHub

heroui-native

Implements HeroUI Native components for React Native apps using Uniwind and Tailwind v4.

1|Updated Aug 11, 2026
Search Tags:#theming#React Native#component library#tailwind#heroui-native#uniwind#mobile UI
One-click install
npx skills add https://github.com/Chia1104/agent-air --skill heroui-native-chia1104
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: heroui-native
Source: https://github.com/Chia1104/agent-air/tree/main/skills/shared/heroui-native
Command: npx skills add https://github.com/Chia1104/agent-air --skill heroui-native-chia1104

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Building mobile UIs with HeroUI Native requires avoiding web-based HeroUI React patterns, and developers need current component documentation, theme variables, and correct setup steps for the beta library. ## Core Features & Use Cases - Component Documentation Access: Fetch MDX docs for any HeroUI Native component, including props, anatomy, variants, and examples, via scripts or direct URLs. - Theme Variable Retrieval: Get light and dark mode HSL color tokens, border radius, and opacity values for theming with Uniwind. - Setup Guidance: Provides installation steps, required peer dependencies, and provider configuration for Expo-based React Native projects. - Use Case: When adding a Card or Dialog to a React Native screen, fetch the component docs first to get the correct compound component structure and native event handlers like onPress. ## Quick Start Ask the agent to fetch the HeroUI Native Button documentation and show how to use it in an Expo React Native screen.

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 a React Native project?▼

Install heroui-native with npm along with peer dependencies: react-native-reanimated, react-native-gesture-handler, react-native-safe-area-context, @gorhom/bottom-sheet, react-native-svg, react-native-worklets, tailwind-merge, and tailwind-variants. 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 MDX docs with props, anatomy, and examples. Docs are also available directly at v3.heroui.com/docs/native/components/{component-name}.mdx.

Can I use HeroUI React web patterns in HeroUI Native?▼

No, HeroUI Native uses Uniwind instead of web Tailwind, HSL colors instead of oklch, and the heroui-native package instead of @heroui/react. CSS files do not work in React Native, and events use onPress rather than onClick.

Does HeroUI Native support dark mode theming?▼

Yes, theme colors are defined as CSS variables in global.css using HSL format, and you can switch themes with Uniwind.setTheme from the uniwind package. Run node scripts/get_theme.mjs to retrieve current light and dark theme variables.

Why is my HeroUI Native app crashing on startup?▼

The app must be wrapped with both GestureHandlerRootView from react-native-gesture-handler and HeroUINativeProvider from heroui-native. Missing either provider, or skipping the Uniwind setup in global.css, causes runtime failures.

Related Skills

Explore More Software Engineering Skills→
aadilmallickaadilmallick

gluestack-ui-v5:setup

Installs and configures gluestack-ui v5 with NativeWind v5 or UniWind on Tailwind CSS v4.

Community
Intermediate
json-choijson-choi

expo-deployment

Deploy Expo applications to iOS, Android, and web via EAS workflows.

Community
Intermediate
artofrawrartofrawr
1

react-native

Generate React Native project structures with platform-specific code templates.

Community
Intermediate
fyndxfyndx
1

heroui-native

Create React Native UIs with Uniwind-styled components and theme customization.

Official
Intermediate