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:

How to Use

1. Identify which component(s) the user needs
2. Read ONLY the reference file(s) for those components
3. Use the examples as-is or adapt them to the user's specific needs
4. 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 HeroUINativeProvider inside GestureHandlerRootView
• 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, lg across all components