UI Components

The UI Components documentation is organized into two focused guides:

HeroUI Native Components

Documentation for the primary UI component library used in Caracal (heroui-native v1.0.5).

Includes:

• 30+ production-ready components (Button, TextField, Card, Dialog, etc.)
• Component variants and styling
• Dark mode support
• Form integration patterns
• 30 interactive component showcases
• Complete API reference

Custom Components

Documentation for the 6 custom components built specifically for Caracal.

Includes:

• Image (Uniwind wrapper for expo-image)
• Text (i18n-enabled)
• ControlledInput (react-hook-form integration)
• List (FlashList wrapper)
• Modal (bottom sheet)
• FocusAwareStatusBar

Quick Reference

Import from heroui-native

import {
  Button,
  TextField,
  Card,
  Dialog,
  Checkbox,
  Switch,
  Select,
  Tabs,
  // ... and 20+ more
} from 'heroui-native';

Import from @/components/ui

import {
  Image,
  Text,
  View,
  ControlledInput,
  List,
  Modal,
  FocusAwareStatusBar,
} from '@/components/ui';

The separation keeps clear boundaries between library components and custom components, and ensures accurate import statements throughout the codebase.