Lohit UI

Professional React Native UI component library for Expo applications with 31 ready-to-use components.

Installation

npm install lohit-ui

Usage

import { Button, Card, Input, Alert } from 'lohit-ui';

export default function App() {
  return (
    <Card>
      <Input label="Email" placeholder="Enter email" />
      <Button title="Submit" onPress={() => alert('Clicked')} />
      <Alert type="success" message="Success!" />
    </Card>
  );
}

Components (31)

Form & Input

• Button - Primary, secondary, outline variants
• Input - Text input with label and error states
• Checkbox - Checkbox with label
• Switch - Toggle switch
• Slider - Range slider
• Rating - Star rating component
• SearchBar - Search input with icons
• RadioGroup - Radio button group

Layout

• Card - Container with border
• Divider - Horizontal/vertical separator
• Accordion - Collapsible content
• Tabs - Tab navigation with icons
• SegmentedControl - iOS-style segment picker
• Stepper - Multi-step progress indicator
• Timeline - Vertical timeline

Display

• Alert - Success, warning, error, info alerts
• Badge - Status badges
• Chip - Tags with delete option
• Avatar - User avatar with initials
• AvatarGroup - Stacked avatars
• ListItem - List row with left/right elements
• StatsCard - Dashboard metric cards
• EmptyState - Empty placeholder with action
• Skeleton - Loading placeholders

Feedback

• Spinner - Loading indicator
• ProgressBar - Progress with percentage
• Modal - Popup dialog
• ActionSheet - Bottom action menu
• Menu - Dropdown menu

Navigation

• BottomNavigation - Bottom tab bar with badges
• FAB - Floating action button
• IconButton - Circular icon buttons

Features

• ✅ 31 professional components
• ✅ TypeScript support
• ✅ Fully customizable
• ✅ Clean design (3px border radius)
• ✅ No shadows - flat, modern look
• ✅ Ionicons compatible
• ✅ Expo ready

Example

import { Ionicons } from '@expo/vector-icons';
import { Button, Alert, Rating } from 'lohit-ui';

<Alert 
  type="success" 
  title="Success!" 
  message="Operation completed"
  icon={<Ionicons name="checkmark-circle" size={24} color="#28A745" />}
/>

<Rating 
  rating={4}
  onRatingChange={(val) => console.log(val)}
  maxRating={5}
/>

License

MIT