Skip to main content

Welcome to @joe111/neo-ui

A modern, customizable React Native UI library built with TypeScript. Inspired by Material-UI, @joe111/neo-ui provides a comprehensive set of components with a powerful theming system.

✨ Features​

  • 🎨 Comprehensive Theme System - Fully customizable colors, typography, and spacing
  • 🧩 Rich Component Library - Pre-built components for common UI patterns
  • 📱 React Native First - Built specifically for React Native with Expo support
  • 🔧 TypeScript Support - Full type safety and IntelliSense
  • 🎯 Navigation Ready - Integrated navigation components
  • 🚀 Performance Optimized - Lightweight and efficient
  • 📦 Tree Shakeable - Individual component imports for optimal bundle size
  • 🔄 Reanimated Integration - Smooth animations with react-native-reanimated
  • 🎪 Haptic Feedback - Native haptic feedback for enhanced UX

🚀 Quick Start​

Installation​

npm install @joe111/neo-ui
# or
yarn add @joe111/neo-ui

Peer Dependencies​

Make sure you have the following peer dependencies installed:

npm install react react-native @react-navigation/native @react-navigation/bottom-tabs @react-navigation/elements react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg

Setup Theme Provider​

Wrap your app with the ThemeProvider:

import React from "react";
import { ThemeProvider } from "@joe111/neo-ui";
import { YourApp } from "./YourApp";

export default function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

Your First Component​

import React from "react";
import { Button, Typography, Box } from "@joe111/neo-ui";

export function YourApp() {
  return (
    <Box padding="lg">
      <Typography variant="h1">Welcome to NeoUI</Typography>
      <Button variant="primary" onPress={() => console.log("Hello NeoUI!")}>
        Get Started
      </Button>
    </Box>
  );
}

📚 What's Included​

Layout & Navigation Components​

  • Box - Flexible container with theme-aware spacing
  • Screen - Screen wrapper with safe area handling
  • ParallaxScrollView - Smooth scrolling with parallax effects

Typography Components​

Form Controls​

  • Button - Customizable button with multiple variants
  • TextField - Input field with validation and theming
  • Chip - Compact elements for tags and filters

Feedback & Indicators​

  • Alert - Alert messages with different severity levels
  • Toast - Toast notifications with global state
  • Skeleton - Loading placeholders
  • Rating - Star rating component

Data Display​

  • Avatar - User profile pictures with fallbacks
  • Badge - Small status indicators
  • Ticker - Animated text ticker

Theming & Customization​

🎯 Design Principles​

Consistency​

Every component follows the same design language, ensuring a cohesive user experience across your entire application.

Performance​

Optimized for mobile performance with minimal bundle size impact and efficient rendering. Tree-shakeable components for optimal bundle size.

Developer Experience​

Intuitive APIs, comprehensive TypeScript support, and extensive documentation to help you build faster.

Modern React Native​

Built with the latest React Native patterns and best practices, including Reanimated 3 for smooth animations.

🏗️ Architecture​

@joe111/neo-ui is built on top of proven technologies:

  • React Native - Cross-platform mobile development
  • React Navigation - Navigation library integration
  • TypeScript - Type safety and better developer experience
  • React Context - State management for theming
  • React Native Reanimated - Smooth animations and interactions
  • React Native SVG - Vector graphics support

🌟 Why @joe111/neo-ui?​

For Developers​

  • Rapid Development: Pre-built components accelerate development
  • Type Safety: Full TypeScript support prevents runtime errors
  • Consistent APIs: Learn once, use everywhere approach
  • Extensive Documentation: Comprehensive guides and examples
  • Tree Shaking: Import only what you need for optimal bundle size

For Designers​

  • Design System: Consistent visual language across all components
  • Customizable: Easy to adapt to your brand and design requirements
  • Responsive: Components adapt to different screen sizes
  • Theme Support: Built-in light/dark mode with custom theme support

for Teams​

  • Collaboration: Shared component library improves team efficiency
  • Maintainability: Centralized components reduce code duplication
  • Quality: Battle-tested components with comprehensive testing
  • Documentation: Self-documenting code with extensive examples

🚦 Getting Started​

Ready to build amazing mobile apps? Here's your roadmap:

  1. Installation & Setup - Get up and running in minutes
  2. Getting Started Guide - Learn the basics
  3. Components - Explore available components
  4. Theming - Customize the look and feel
  5. Customization - Advanced customization techniques

🤝 Community & Support​

📄 License​

@joe111/neo-ui is open source software licensed under the MIT License.

Ready to build beautiful and performant React Native applications? Let's get started!