NexaUI 🚀

A comprehensive, production-ready UI library for Expo React Native that surpasses existing frameworks in cleanliness, developer experience, and design quality.

✨ Features

• 🎨 Clean & Minimal Design - Focus on clean lines, subtle shadows, perfect spacing
• 🎯 TypeScript First - Full TypeScript support with excellent IntelliSense
• 🌓 Dark/Light Mode - Built-in theme system with seamless mode switching
• ♿ Accessibility - WCAG 2.1 AA compliant with proper screen reader support
• 📱 Platform Aware - Respects iOS/Android conventions automatically
• 🔧 Zero Dependencies - Built on React Native primitives for minimal bundle impact
• 🎭 Customizable - Comprehensive theming system with design tokens
• 🧪 Well Tested - Comprehensive test coverage with Jest and Testing Library

📦 Installation

npm install nexa-ui
# or
yarn add nexa-ui

🚀 Quick Start

import React from 'react';
import { ThemeProvider, Button, Typography, Card } from 'nexa-ui';

export default function App() {
  return (
    <ThemeProvider mode="light">
      <Card>
        <Typography variant="headline-medium">
          Welcome to NexaUI
        </Typography>
        <Typography variant="body-medium" color="secondary">
          A clean, modern UI library for React Native
        </Typography>
        <Button variant="primary" onPress={() => console.log('Hello!')}>
          Get Started
        </Button>
      </Card>
    </ThemeProvider>
  );
}

🎨 Components

Core Components (✅ Implemented)

• Typography - Heading, body, caption components with proper scaling
• Button - Primary, secondary, outline, ghost variants with loading states
• Input - Text input with validation states, icons, and helper text
• Card - Clean container with header, content, and footer sections

Layout Components (🚧 Coming Soon)

• Box - Flexible layout primitive with spacing props
• Stack - Vertical and horizontal stacking with gaps
• Container - Responsive container with max-width constraints

Form Components (🚧 Coming Soon)

• Switch - Clean toggle switches with smooth animations
• Checkbox - Custom styled checkboxes
• Radio - Radio button groups
• Select - Dropdown with search functionality

Feedback Components (🚧 Coming Soon)

• Loading - Spinner, skeleton loaders, and progress indicators
• Toast - Non-intrusive notification system
• Alert - Alert dialogs and banners
• Modal - Full modal with smooth animations
• Sheet - Bottom sheet component

Display Components (🚧 Coming Soon)

• Avatar - User profile images with fallback states
• Badge - Status indicators and notification badges
• Tabs - Clean tab navigation with smooth transitions
• Accordion - Collapsible content sections

🎭 Theming

NexaUI uses a comprehensive design token system for consistent theming:

Theme Provider

import { ThemeProvider, lightTheme, darkTheme } from 'nexa-ui';

function App() {
  const [mode, setMode] = useState('light');
  
  return (
    <ThemeProvider mode={mode} onModeChange={setMode}>
      {/* Your app content */}
    </ThemeProvider>
  );
}

Using Theme Tokens

import { useTheme } from 'nexa-ui';

function MyComponent() {
  const { theme } = useTheme();
  
  return (
    <View style={{
      backgroundColor: theme.colors.semantic.surface.primary,
      padding: theme.spacing.semantic.md,
      borderRadius: theme.borderRadius.component.card,
    }}>
      {/* Component content */}
    </View>
  );
}

Design Tokens

Colors

• Primary - Brand colors in 11 shades (50-950)
• Secondary - Neutral grays for backgrounds and borders
• Semantic - Success, warning, error, info states
• Feedback - Contextual colors for different states

Typography

• Scale - From 10px to 56px with proper line heights
• Weights - Thin to black (100-900)
• Families - Platform-specific font stacks

Spacing

• Base Unit - 4px scale for perfect alignment
• Semantic - xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
• Component - Pre-defined spacing for consistent components

Shadows

• Elevation - 8 levels from none to 3xl
• Platform Aware - iOS shadows vs Android elevation

📖 Component API

Typography

<Typography
  variant="headline-large"    // Typography scale variant
  color="primary"             // Semantic color
  customColor="#FF0000"       // Custom color override
  align="center"              // Text alignment
  weight="bold"               // Font weight override
  italic                      // Italic text
  underline                   // Underlined text
>
  Hello World
</Typography>

Button

<Button
  variant="primary"           // primary | secondary | outline | ghost | destructive
  size="medium"              // small | medium | large
  loading={isLoading}        // Loading state
  loadingText="Saving..."    // Loading text
  disabled={isDisabled}      // Disabled state
  icon={<Icon />}            // Icon component
  iconPosition="left"        // left | right
  width="full"               // full | number
  onPress={handlePress}      // Press handler
>
  Click Me
</Button>

Input

<Input
  label="Email Address"       // Field label
  placeholder="Enter email"   // Placeholder text
  value={email}              // Controlled value
  onChangeText={setEmail}    // Change handler
  state="error"              // default | success | warning | error
  helperText="Helper text"   // Helper text
  errorMessage="Error!"      // Error message
  required                   // Required field
  disabled                   // Disabled state
  leftIcon={<Icon />}        // Left icon
  rightIcon={<Icon />}       // Right icon
  fullWidth                  // Full width
/>

Card

<Card variant="elevated" padding="medium">
  <CardHeader>
    <Typography variant="title-medium">Card Title</Typography>
  </CardHeader>
  <CardContent>
    <Typography variant="body-medium">Card content goes here.</Typography>
  </CardContent>
  <CardFooter>
    <Button variant="ghost">Cancel</Button>
    <Button variant="primary">Confirm</Button>
  </CardFooter>
</Card>

♿ Accessibility

NexaUI components are built with accessibility in mind:

• Screen Reader Support - Proper ARIA labels and roles
• Keyboard Navigation - Full keyboard support
• High Contrast - WCAG 2.1 AA compliant color ratios
• Reduced Motion - Respects system motion preferences
• Focus Management - Clear focus indicators

<Button
  accessibilityLabel="Save document"
  accessibilityHint="Saves the current document to your account"
>
  Save
</Button>

🧪 Testing

NexaUI includes comprehensive testing utilities:

import { render, fireEvent } from '@testing-library/react-native';
import { Button, ThemeProvider } from 'nexa-ui';

test('button calls onPress when pressed', () => {
  const onPress = jest.fn();
  
  const { getByText } = render(
    <ThemeProvider>
      <Button onPress={onPress}>Click me</Button>
    </ThemeProvider>
  );
  
  fireEvent.press(getByText('Click me'));
  expect(onPress).toHaveBeenCalled();
});

📱 Platform Support

• iOS - Native feel with iOS Human Interface Guidelines
• Android - Material Design principles where appropriate
• Web - Full Expo Web compatibility with proper focus management

🛠️ Development

# Clone the repository
git clone https://github.com/nexa-ui/nexa-ui.git

# Install dependencies
cd nexa-ui
npm install

# Run tests
npm test

# Build the library
npm run build

# Run example app
cd example
npm install
npm start

📊 Bundle Size

NexaUI is optimized for minimal bundle impact:

• Tree Shakeable - Import only what you use
• Zero Dependencies - No external runtime dependencies
• Optimized Builds - Minified and gzipped builds

🗺️ Roadmap

v1.1 - Enhanced Components

• [ ] Switch/Toggle component
• [ ] Checkbox and Radio components
• [ ] Loading indicators and spinners
• [ ] Toast notification system

v1.2 - Navigation & Modals

• [ ] Modal and Sheet components
• [ ] Tab navigation component
• [ ] Accordion component
• [ ] Action Sheet component

v1.3 - Advanced Features

• [ ] Date/Time pickers
• [ ] Slider components
• [ ] Enhanced List components
• [ ] Search Bar component

v2.0 - Ecosystem

• [ ] CLI tool for component generation
• [ ] Figma design kit
• [ ] Storybook integration
• [ ] Animation library

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see LICENSE for details.

🙏 Acknowledgments

• Inspired by the best practices from Material Design, Human Interface Guidelines, and modern design systems
• Built with love for the React Native community

Made with ❤️ by the NexaUI Team

Website • Documentation • GitHub • Discord