Heroui Native

A focused assistant for building React Native apps with HeroUI Native, the mobile component library that runs on Uniwind instead of regular Tailwind CSS. It knows the critical differences between HeroUI's web and native versions (HSL vs oklch colors, onPress vs onClick, compound component patterns) and will fetch current documentation before suggesting implementations. Handles the full setup process including required dependencies like react-native-reanimated and proper provider wrapping. Most useful when you need to implement specific mobile UI patterns without accidentally mixing in web-only HeroUI React code that won't work on iOS and Android.

skills.sh installs: 11.2K
GitHub stars: 31.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add heroui-inc/heroui --skill heroui-native --agent claude-code

Installs into .claude/skills of the current project.

Files

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	oklch format	HSL format
Package	`@heroui/react`	`heroui-native`
Platform	Web browsers	iOS & Android

// CORRECT — Native pattern
import { Button } from "heroui-native";

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

SKILL.md on GitHub