# heroui-native

> Build React Native UI with HeroUI Native component library. Use when user explicitly mentions HeroUI, heroui-native, or asks about HeroUI Native components like Button, Card, TextField, Dialog, BottomSheet, Toast, Switch, Checkbox, Tabs, or Accordion. Provides component APIs, compound component patterns, styling with Tailwind/Uniwind, and theming guidance.

- Author: Eric Kreutzer
- Repository: erickreutz/dotfiles
- Version: 20260124140251
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/erickreutz/dotfiles
- Web: https://mule.run/skillshub/@@erickreutz/dotfiles~heroui-native:20260124140251

---

---
name: heroui-native
description: Build React Native UI with HeroUI Native component library. Use when user explicitly mentions HeroUI, heroui-native, or asks about HeroUI Native components like Button, Card, TextField, Dialog, BottomSheet, Toast, Switch, Checkbox, Tabs, or Accordion. Provides component APIs, compound component patterns, styling with Tailwind/Uniwind, and theming guidance.
---

# HeroUI Native

React Native component library built on Tailwind v4 via Uniwind with smooth animations and accessibility.

## Quick Reference

```tsx
import { Button, Card, TextField, Dialog, Toast, Switch } from 'heroui-native';
```

### Provider Setup (required)

```tsx
import { HeroUINativeProvider } from 'heroui-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

<GestureHandlerRootView style={{ flex: 1 }}>
  <HeroUINativeProvider>
    {/* App content */}
  </HeroUINativeProvider>
</GestureHandlerRootView>
```

## Component Categories

### Interactive Components
- **Button** - `variant`: primary|secondary|tertiary|ghost|danger|danger-soft, `size`: sm|md|lg
- **Switch** - `isSelected`, `onSelectedChange`, compound: `Switch.Thumb`
- **Checkbox** - `isSelected`, `onSelectedChange`
- **TextField** - `isRequired`, `isInvalid`, compounds: Label, Input, ErrorMessage
- **Select** - Dropdown selection

### Display Components
- **Card** - compounds: Card.Header, Card.Body, Card.Footer, Card.Title, Card.Description
- **Avatar** - User avatars with images/initials
- **Chip** - Compact labels
- **Spinner** - Loading indicator, `size`: sm|md|lg, `color`: default|success|warning|danger

### Overlay Components
- **Dialog** - Modal overlay with gesture dismiss
- **BottomSheet** - Slides from bottom, supports snap points
- **Toast** - Temporary notifications via `useToast()` hook
- **Popover** - Floating content anchored to trigger

### Layout
- **Tabs** - Tabbed navigation
- **Accordion** - Collapsible panels

## Core Patterns

### Compound Components
Components use dot notation for sub-components:

```tsx
<Button>
  <Button.Label>Click me</Button.Label>
</Button>

<Card>
  <Card.Body>
    <Card.Title>Title</Card.Title>
    <Card.Description>Description</Card.Description>
  </Card.Body>
  <Card.Footer>
    <Button>Action</Button>
  </Card.Footer>
</Card>
```

### Styling with className
All components accept `className` for Tailwind utilities:

```tsx
<Button className="bg-accent px-6 rounded-lg">
  <Button.Label>Styled</Button.Label>
</Button>
```

### asChild Pattern
Replace rendered element while keeping behavior:

```tsx
<Dialog.Trigger asChild>
  <Button>Open Dialog</Button>
</Dialog.Trigger>
```

### Controlled State
Most interactive components support controlled patterns:

```tsx
const [isSelected, setIsSelected] = useState(false);
<Switch isSelected={isSelected} onSelectedChange={setIsSelected} />
```

## Detailed References

- **Form & Interactive components**: See [references/components.md](references/components.md)
- **Dialog, BottomSheet, Toast, Popover**: See [references/overlays.md](references/overlays.md)
- **Styling, theming, composition**: See [references/patterns.md](references/patterns.md)