skills.rest
Tgoldi
TgoldiCOMMUNITY
Explore all skills by this author →
GitHub

heroui-native

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Building mobile UIs with HeroUI Native requires learning its compound component patterns, Uniwind styling, and HSL theming, which differ significantly from HeroUI React web patterns. This Skill provides correct native implementation guidance and fetches up-to-date component documentation on demand. ## Core Features & Use Cases - Component Documentation Access: Fetch MDX docs, props, and examples for any HeroUI Native component via helper scripts or direct URLs. - Installation & Setup Guidance: Covers Expo setup, peer dependencies, provider wrapping, and global.css configuration for Uniwind. - Theme Variable Retrieval: Pull light/dark theme tokens in HSL format for custom theming. - Use Case: When building a React Native settings screen, use this Skill to get the correct Card compound component structure, semantic variants, and theme colors instead of mistakenly applying web patterns. ## Quick Start Ask the assistant to show how to implement a HeroUI Native Button with proper variants and theming in an 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 a React Native project?▼

Install heroui-native plus peer dependencies including react-native-reanimated, react-native-gesture-handler, react-native-safe-area-context, @gorhom/bottom-sheet, react-native-svg, and tailwind-variants. Then configure global.css with Tailwind and Uniwind imports and wrap your app in HeroUINativeProvider.

How do I get HeroUI Native component documentation?▼

Run node scripts/get_component_docs.mjs followed by component names like Button or Card to fetch MDX docs with props and examples. You can also fetch directly from v3.heroui.com/docs/native/components/{component-name}.mdx.

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

HeroUI Native targets iOS and Android using Uniwind instead of web Tailwind, HSL colors instead of oklch, and the heroui-native package instead of @heroui/react. Web patterns like CSS file imports and onClick handlers do not work in Native.

Does HeroUI Native support dark mode theming?▼

Yes, HeroUI Native supports light and dark themes through CSS variables defined in global.css using HSL format. Use useUniwind and Uniwind.setTheme to switch themes, and useThemeColor to access theme colors programmatically.

Why is my HeroUI Native component not rendering correctly?▼

Common causes include missing HeroUINativeProvider or GestureHandlerRootView wrappers, incorrect global.css imports, or using web patterns like onClick instead of onPress. Verify all peer dependencies are installed and compound component structure is used.

Related Skills

Explore More Software Engineering Skills→
SajinthanSajinthan

screen

Generate Expo Router screens, route groups, and layouts for React Native apps.

Community
Advanced
spatiespatie
12

App Store Screenshots Skill

Automate App Store and Play Store screenshot capture with simulators and emulators.

Official
Advanced
tchiphuongtchiphuong

heroui-v3

Create HeroUI v3 UI components with React 19 and Tailwind CSS v4.

Community
Intermediate
ramariveraramarivera

tamagui-v2

Build universal React Native and Web apps with Tamagui v2 styling and tokens.

Community
Advanced