HeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when working with HeroUI Native components, installing HeroUI Native, customizing themes, or accessing component documentation. Keywords: HeroUI Native, heroui-native, React Native UI, Uniwind.
npxskills add heroui-inc/heroui--skill heroui-nativeLoading…
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.
curl -fsSL https://heroui.com/install | bash -s heroui-native
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>;
Always fetch Native docs before implementing.
primary, secondary, tertiary) over visual descriptionsFor component details, examples, props, and implementation patterns, always fetch documentation:
# 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
Component docs: https://heroui.com/docs/native/components/{component-name}.mdx
Examples:
https://heroui.com/docs/native/components/button.mdxhttps://heroui.com/docs/native/components/dialog.mdxhttps://heroui.com/docs/native/components/text-field.mdxGetting 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.
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
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
global.css:@import "tailwindcss";
@import "uniwind";
@import "heroui-native/styles";
@source "./node_modules/heroui-native/lib";
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>
);
}
HeroUINativeProviderGestureHandlerRootView from react-native-gesture-handlerCard.Header, Card.Body)onPress event handlersPlatform.OS for iOS/Android differencesHeroUI 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:
Card.Header)Card.Body (not Card.Content); Title and Description go inside BodyHeroUI uses semantic naming to communicate functional intent:
| Variant | Purpose | Usage |
|---|---|---|
primary | Main action to move forward | 1 per context |
secondary | Alternative actions | Multiple |
tertiary | Dismissive actions (cancel, skip) | Sparingly |
danger | Destructive actions | When needed |
danger-soft | Soft destructive actions | Less prominent |
ghost |
Don't use raw colors - semantic variants adapt to themes and accessibility.
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
| Low-emphasis actions |
| Minimal weight |
outline | Secondary actions | Bordered style |
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).