@easyappkit/ui-components

A comprehensive, themeable UI component library for React Native and Expo applications.

Features

✨ 32 Production-Ready Components - Typography, Layout, Forms, Feedback, Data Display, Navigation, and Interactive 🎨 Advanced Theming System - Full customization with light/dark mode support 📱 Cross-Platform - Works seamlessly on iOS, Android, and Web 🔒 TypeScript First - Complete type safety and IntelliSense support ⚡ Tree-Shakeable - Import only what you need 🎯 Accessibility Ready - Built with accessibility in mind

Installation

npm install @easyappkit/ui-components

Peer Dependencies

npm install react react-native

Quick Start

1. Wrap your app with ThemeProvider

import { ThemeProvider, defaultTheme } from '@easyappkit/ui-components';

export default function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      {/* Your app content */}
    </ThemeProvider>
  );
}

2. Use components

import {
  Button,
  Input,
  Stack,
  Card,
  Typography,
  useToast,
} from '@easyappkit/ui-components';

function MyScreen() {
  const { showToast } = useToast();
  const [email, setEmail] = useState('');

  return (
    <Card>
      <Stack spacing="lg">
        <Typography variant="h2">Welcome</Typography>

        <Input
          label="Email"
          value={email}
          onChangeText={setEmail}
          placeholder="Enter your email"
        />

        <Button
          title="Submit"
          onPress={() => showToast({
            message: 'Form submitted!',
            variant: 'success'
          })}
        />
      </Stack>
    </Card>
  );
}

Components Overview

Basic Components (5)

• Button - Customizable button with variants and loading state
• Input - Text input with label and error support
• Card - Container with themed styling and shadows
• Avatar - User avatar with initials or image
• Badge - Status badges with color variants

Typography (11)

• Typography - Base text component with variants
• Heading1-6 - Semantic heading components
• Body, BodyLarge, BodySmall - Body text variants
• Caption, Overline - Small text styles

Layout (5)

• Container - Responsive container with max-width
• Stack - Flexible row/column layout
• Box - Layout primitive with spacing props
• Divider - Horizontal/vertical dividers
• Spacer - Flexible spacing component

Forms (4)

• TextArea - Multi-line input with character count
• Select - Custom dropdown picker
• Checkbox - Styled checkbox with label
• Switch - Native switch with theming

Feedback (5)

• Modal - Full-featured modal dialogs
• Loading - Loading spinner with overlay option
• ProgressBar - Linear progress indicator
• Skeleton - Loading placeholders
• Toast - Toast notifications (with provider)

Data Display (3)

• List & ListItem - Themed lists with dividers
• EmptyState - Empty state placeholders

Navigation (1)

• Tabs - Tab navigation with variants (default, pills, underline)

Interactive (10)

• Accordion - Collapsible content sections
• ActionSheet - iOS-style bottom action sheet
• BottomSheet - Draggable bottom sheet with snap points
• Drawer - Side drawer (left/right positioning)
• Swipeable - Swipeable container with actions
• PullToRefresh - Pull-to-refresh wrapper for ScrollView
• Carousel - Image/content carousel with auto-play
• Chip - Compact element for tags, filters, and selections
• FAB - Floating Action Button with group support

Documentation

📚 Component Usage Guide - Complete usage examples for all components 🎨 Theming Guide - Customizing themes and creating your own 📖 API Reference - Detailed API documentation for all components

Example Usage

Dark Mode Support

import { useState } from 'react';
import { ThemeProvider, defaultTheme, darkTheme, Switch } from '@easyappkit/ui-components';

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <ThemeProvider theme={isDark ? darkTheme : defaultTheme}>
      <Switch
        label="Dark Mode"
        value={isDark}
        onValueChange={setIsDark}
      />
      {/* Your app */}
    </ThemeProvider>
  );
}

Custom Theme

import { ThemeProvider, defaultTheme } from '@easyappkit/ui-components';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#FF6B6B',
    secondary: '#4ECDC4',
  },
};

<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>

Toast Notifications

import { ToastProvider, useToast, Button } from '@easyappkit/ui-components';

// Wrap your app
function App() {
  return (
    <ToastProvider>
      <MyComponent />
    </ToastProvider>
  );
}

// Use in components
function MyComponent() {
  const { showToast } = useToast();

  return (
    <Button
      title="Show Toast"
      onPress={() => showToast({
        message: 'Hello!',
        variant: 'success',
        position: 'top',
      })}
    />
  );
}

TypeScript Support

Full TypeScript support with exported types:

import type {
  Theme,
  ThemeColors,
  ButtonProps,
  InputProps,
  // ... all component props
} from '@easyappkit/ui-components';

Contributing

Contributions are welcome! Please read the contributing guidelines first.

License

MIT © Easy App Kit

Links

• Component Usage Guide
• Theming Guide
• API Reference
• GitHub Repository
• Report Issues

Roadmap

• [ ] Navigation components (Tabs, TabBar)
• [ ] Icon support for Button and Input
• [ ] Advanced interactive components
• [ ] Storybook documentation
• [ ] Performance optimizations

Built with ❤️ for React Native developers