--- 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'; {\/* 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