Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
heroui-inc avatar

Heroui Native

  • 8.3k installs
  • 30.3k repo stars
  • Updated August 4, 2026
  • heroui-inc/heroui

heroui-native is an agent skill for building React Native UIs with HeroUI Native components, Uniwind styling, and theme configuration.

About

The heroui-native skill guides development with HeroUI Native, a React Native component library built on Uniwind Tailwind CSS for React Native. It covers installing heroui-native via the official curl installer, using components like Button, Card, TextField, and Dialog, and configuring dark and light themes. Critical guidance separates Native from web HeroUI React patterns because package names, styling engines, and color formats differ. Native uses heroui-native with HSL colors and Uniwind while web uses @heroui/react with oklch on browsers. The skill fetches component documentation when building mobile UIs and warns against applying web HeroUI patterns to React Native code. Platform support targets iOS and Android applications. Use when building mobile UIs with HeroUI Native, installing the library, configuring themes, or fetching native component docs.

  • HeroUI Native on Uniwind Tailwind for React Native iOS and Android.
  • Do not use web @heroui/react patterns on native projects.
  • HSL color format on native vs oklch on web HeroUI React.
  • Components include Button, Card, TextField, Dialog, and more.
  • Official curl installer for heroui-native setup.

Heroui Native by the numbers

  • 8,326 all-time installs (skills.sh)
  • +276 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Ranked #19 of 1,039 Mobile Development skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

heroui-native capabilities & compatibility

Capabilities
heroui native component usage · uniwind tailwind styling for rn · dark and light theme configuration · web vs native pattern separation guidance
Use cases
frontend · ui design
From the docs

What heroui-native says it does

CRITICAL: Native Only - Do Not Use Web Patterns
SKILL.md
npx skills add https://github.com/heroui-inc/heroui --skill heroui-native

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs8.3k
repo stars30.3k
Security audit2 / 3 scanners passed
Last updatedAugust 4, 2026
Repositoryheroui-inc/heroui

How do I build mobile UI with HeroUI Native components without mixing web HeroUI React patterns?

Build React Native mobile UIs with HeroUI Native components, Uniwind Tailwind styling, and dark/light theme configuration.

Who is it for?

Developers building iOS and Android apps with HeroUI Native and Uniwind Tailwind.

Skip if: Skip for web-only HeroUI React projects using @heroui/react and oklch colors.

When should I use this skill?

User builds React Native UI with HeroUI Native, installs heroui-native, or configures mobile themes.

What you get

Correct React Native HeroUI Native components with Uniwind styling and HSL theme colors.

  • configured heroui-native screens
  • theme configuration

By the numbers

  • Skill metadata version 2.0.1
  • Built on Uniwind with Tailwind CSS v4 for React Native

Files

SKILL.mdMarkdownGitHub ↗

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:

FeatureReact (Web)Native (Mobile)
StylingTailwind CSS v4Uniwind (Tailwind for React Native)
Colorsoklch formatHSL format
Package@heroui/reactheroui-native
PlatformWeb browsersiOS & Android
// CORRECT — Native pattern
import { Button } from "heroui-native";

<Button variant="primary" onPress={() => console.log("Pressed!")}>
	Click me
</Button>;

Always fetch Native docs before implementing.

---

Core Principles

  • Semantic variants (primary, secondary, tertiary) over visual descriptions
  • Composition over configuration (compound components)
  • Theme variables with HSL color format
  • React Native StyleSheet patterns with Uniwind utilities

---

Accessing Documentation & Component Information

For component details, examples, props, and implementation patterns, always fetch documentation:

Using Scripts

# List all available components
node scripts/list_components.mjs

# Get component documentation (MDX)
node scripts/get_component_docs.mjs Button
node scripts/get_component_docs.mjs Button Card TextField

# Get theme variables
node scripts/get_theme.mjs

# Get non-component docs (guides, releases)
node scripts/get_docs.mjs /docs/native/getting-started/theming

Direct MDX URLs

Component docs: https://heroui.com/docs/native/components/{component-name}.mdx

Examples:

  • Button: https://heroui.com/docs/native/components/button.mdx
  • Dialog: https://heroui.com/docs/native/components/dialog.mdx
  • TextField: https://heroui.com/docs/native/components/text-field.mdx

Getting started guides: https://heroui.com/docs/native/getting-started/{topic}.mdx

Important: Always fetch component docs before implementing. The MDX docs include complete examples, props, anatomy, and API references.

---

Installation Essentials

Quick Install

npm i heroui-native react-native-reanimated react-native-gesture-handler react-native-safe-area-context @gorhom/bottom-sheet react-native-svg react-native-worklets tailwind-merge tailwind-variants

Framework Setup (Expo - Recommended)

1. Install dependencies:

npx create-expo-app MyApp
cd MyApp
npm i heroui-native uniwind tailwindcss
npm i react-native-reanimated react-native-gesture-handler react-native-safe-area-context @gorhom/bottom-sheet react-native-svg react-native-worklets tailwind-merge tailwind-variants

2. Create `global.css`:

@import "tailwindcss";
@import "uniwind";
@import "heroui-native/styles";

@source "./node_modules/heroui-native/lib";

3. Wrap app with providers:

import { GestureHandlerRootView } from "react-native-gesture-handler";
import { HeroUINativeProvider } from "heroui-native";
import "./global.css";

export default function Layout() {
	return (
		<GestureHandlerRootView style={{ flex: 1 }}>
			<HeroUINativeProvider>
				<App />
			</HeroUINativeProvider>
		</GestureHandlerRootView>
	);
}

Critical Setup Requirements

1. Uniwind is Required - HeroUI Native uses Uniwind (Tailwind CSS for React Native) 2. HeroUINativeProvider Required - Wrap your app with HeroUINativeProvider 3. GestureHandlerRootView Required - Wrap with GestureHandlerRootView from react-native-gesture-handler 4. Use Compound Components - Components use compound structure (e.g., Card.Header, Card.Body) 5. Use onPress, not onClick - React Native uses onPress event handlers 6. Platform-Specific Code - Use Platform.OS for iOS/Android differences

---

Component Patterns

HeroUI Native uses compound component patterns. Each component has subcomponents accessed via dot notation.

Example - Card:

<Card>
	<Card.Header>{/* Icons, badges */}</Card.Header>
	<Card.Body>
		<Card.Title>Title</Card.Title>
		<Card.Description>Description</Card.Description>
	</Card.Body>
	<Card.Footer>{/* Actions */}</Card.Footer>
</Card>

Key Points:

  • Always use compound structure - don't flatten to props
  • Subcomponents are accessed via dot notation (e.g., Card.Header)
  • Native Card uses Card.Body (not Card.Content); Title and Description go inside Body
  • Fetch component docs for complete anatomy and examples

---

Semantic Variants

HeroUI uses semantic naming to communicate functional intent:

VariantPurposeUsage
primaryMain action to move forward1 per context
secondaryAlternative actionsMultiple
tertiaryDismissive actions (cancel, skip)Sparingly
dangerDestructive actionsWhen needed
danger-softSoft destructive actionsLess prominent
ghostLow-emphasis actionsMinimal weight
outlineSecondary actionsBordered style

Don't use raw colors - semantic variants adapt to themes and accessibility.

---

Theming

HeroUI Native uses CSS variables via Tailwind/Uniwind for theming. Theme colors are defined in global.css:

@theme {
	--color-accent: hsl(260, 100%, 70%);
	--color-accent-foreground: hsl(0, 0%, 100%);
}

Get current theme variables:

node scripts/get_theme.mjs

Access theme colors programmatically:

import { useThemeColor } from "heroui-native";

const accentColor = useThemeColor("accent");

Theme switching (Light/Dark Mode):

import { Uniwind, useUniwind } from "uniwind";

const { theme } = useUniwind();
Uniwind.setTheme(theme === "light" ? "dark" : "light");

For detailed theming, fetch: https://heroui.com/docs/native/getting-started/theming.mdx

Related skills

FAQ

What styling system does HeroUI Native use?

HeroUI Native builds on Uniwind, which provides Tailwind CSS v4 utilities for React Native. Developers configure dark and light themes through Uniwind instead of web-only CSS pipelines.

Which components does the HeroUI Native skill document?

The HeroUI Native skill (version 2.0.1) covers Buttons, Cards, TextFields, Dialogs, installation, theme setup, and fetching component documentation for React Native mobile apps.

Is Heroui Native safe to install?

skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.