HeroUI Native Examples
Reference-based skill for HeroUI Native component implementation. Load only the reference file needed for the task.
Component Index
Find the right reference file by component name:
| Component | Reference File |
|---|---|
| Button, CloseButton | references/buttons.md |
| Input, TextField, Label, Description, FieldError, InputOTP, ControlField | references/forms-input.md |
| Checkbox, RadioGroup, Select, SearchField, TextArea | references/forms-selection.md |
| Alert, Spinner, Skeleton, SkeletonGroup | references/feedback.md |
| Accordion, Tabs, ListGroup | references/navigation.md |
| Dialog, BottomSheet, Popover, Toast | references/overlays.md |
| Card, Surface, Separator | references/layout.md |
| Switch, Slider | references/controls.md |
| Avatar, Chip, ScrollShadow | references/data-display.md |
| Provider, Setup, global.css | references/setup-guide.md |
| Theming, Colors, Styling, Animation | references/theming-styling.md |
How to Use
- Identify which component(s) the user needs
- Read ONLY the reference file(s) for those components
- Use the examples as-is or adapt them to the user's specific needs
- For multi-component UIs, read multiple reference files as needed
Key Patterns
All HeroUI Native components follow these patterns:
// Import from heroui-native
import { Button, Card, Dialog } from 'heroui-native';
// Compound component pattern with dot notation
<Card>
<Card.Header />
<Card.Body>
<Card.Title>Title</Card.Title>
<Card.Description>Desc</Card.Description>
</Card.Body>
<Card.Footer />
</Card>
// Styling with Tailwind className
<Button className="bg-accent px-6" variant="primary">
<Button.Label className="text-accent-foreground">Click</Button.Label>
</Button>
// asChild for composition
<Dialog.Trigger asChild>
<Button variant="secondary">Open</Button>
</Dialog.Trigger>
// Controlled state
const [isOpen, setIsOpen] = useState(false);
<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>...</Dialog>Critical Rules
- Always wrap app with
HeroUINativeProviderinsideGestureHandlerRootView - Import styles in global.css:
@import 'heroui-native/styles' - Text colors go on
Button.Label/Chip.Label, NOT on root component - Use
withUniwind(IconComponent)to style third-party icons with className - Overlay components (Dialog, BottomSheet, Popover) need Portal + Overlay pattern
- Use
cn()utility from heroui-native for conditional className merging - Variants:
primary(main action),secondary(alternative),tertiary(dismissive),danger(destructive) - Sizes:
sm,md,lgacross all components