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 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