Aargon UI 🎨✨

Aargon UI is a collection of headless, animated UI components for React Native, built using Reanimated and Moti for smooth and visually stunning UI effects. Each component is published as an individual package for maximum flexibility and tree-shaking.

🚀 Beta Available! The unified aargon-ui package is now available in beta with all components bundled together for easier installation and usage.

🚀 Features

• Headless UI components - Style them however you want
• Individual packages - Install only what you need
• Turbo monorepo - Fast builds and development
• TypeScript support - Full type safety
• React Native 0.81.4 - Latest stable version
• Expo compatible - Works with Expo ~54.0.10
• Optimized performance - Built with Reanimated 4
• Accessibility - Full accessibility support with ARIA attributes
• Customizable - Complete theming and styling system

📦 Installation Options

Option 1: Unified Package (Beta) 🚀

Install all components at once with the unified package:

# Install beta version
npm install aargon-ui@beta

# Or with yarn
yarn add aargon-ui@beta

Benefits:

• ✅ Single package installation
• ✅ All components included
• ✅ Simplified imports
• ✅ Consistent versioning

Option 2: Individual Packages 📦

Install only the components you need:

# Install specific components
npm install aargon-accordion aargon-button aargon-input

# Or with yarn
yarn add aargon-accordion aargon-button aargon-input

Benefits:

• ✅ Smaller bundle size
• ✅ Tree-shaking friendly
• ✅ Granular control
• ✅ Independent versioning

📦 Packages

Core Components

Package	Description	npm	Status
aargon-button	Animated button component with multiple variants		🚧 Coming Soon
aargon-input	Animated input component with floating labels		🚧 Coming Soon
aargon-modal	Animated modal component with backdrop		🚧 Coming Soon
aargon-card	Animated card component with shadows		🚧 Coming Soon
aargon-switch	Animated switch component		🚧 Coming Soon

Form Components

Package	Description	npm	Status
aargon-checkbox	Animated checkbox component		🚧 Coming Soon
aargon-radio	Animated radio component		🚧 Coming Soon
aargon-select	Animated select component		🚧 Coming Soon
aargon-dropdown	Animated dropdown component		🚧 Coming Soon

Layout Components

Package	Description	npm	Status
aargon-accordion	Animated accordion component		✅ Published
aargon-badge	Animated badge component		🚧 Coming Soon
aargon-progress	Animated progress component		🚧 Coming Soon
aargon-skeleton	Animated skeleton component		🚧 Coming Soon

Feedback Components

Package	Description	npm	Status
aargon-snackbar	Animated snackbar component		🚧 Coming Soon
aargon-toast	Animated toast component		🚧 Coming Soon

Status Legend

• ✅ Published - Available on npm
• 🚧 Coming Soon - In development
• 🔄 In Progress - Currently being worked on

🚀 Quick Start

Using the Unified Package (Beta)

import React from 'react';
import { View, Text } from 'react-native';
import { AnimatedAccordion, AnimatedButton } from 'aargon-ui';

export default function App() {
    return (
        <View>
            <AnimatedAccordion title="Click to expand">
                <Text>This is the accordion content!</Text>
            </AnimatedAccordion>

            <AnimatedButton onPress={() => console.log('Pressed!')}>Click me!</AnimatedButton>
        </View>
    );
}

Using Individual Packages

import React from 'react';
import { View, Text } from 'react-native';
import { AnimatedAccordion } from 'aargon-accordion';

export default function App() {
    return (
        <AnimatedAccordion title="Click to expand">
            <Text>This is the accordion content!</Text>
        </AnimatedAccordion>
    );
}

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for detailed information on how to contribute to this project.

Quick Start for Contributors

1. Fork and clone the repository
2. Install dependencies with yarn install
3. Start development with yarn dev:source
4. Create a feature branch and make your changes
5. Submit a pull request following our guidelines

For more detailed information, please read our Contributing Guidelines.

📖 Documentation

• Package Documentation - Each package has its own README
• API Reference - Comprehensive prop and type documentation
• Examples - Live examples in the example app
• Changelog - Version history and breaking changes

🏗️ Architecture

• Monorepo: Managed with Turbo for fast builds
• Individual packages: Each component is a separate npm package
• Shared configuration: Common TypeScript and build configs
• Example app: Demonstrates all components in examples/
• TypeScript: Full type safety across all packages
• Hot reload: Instant development with source files

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• React Native Reanimated - For smooth animations
• Lucide React Native - For beautiful icons
• Expo - For the amazing development platform
• Turbo - For fast monorepo builds
• All contributors - Thank you for making this project better!

---

Made with ❤️ by Aargon