{"id":36539159,"url":"https://github.com/aargon007/aargon-ui","last_synced_at":"2026-01-12T05:37:11.582Z","repository":{"id":283121699,"uuid":"950650316","full_name":"aargon007/aargon-ui","owner":"aargon007","description":"Aargon UI – A collection of beautifully animated React Native components powered by Moti, Reanimated, and Skia for stunning UI experiences.","archived":false,"fork":false,"pushed_at":"2025-09-30T05:05:54.000Z","size":2922,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-22T22:03:23.584Z","etag":null,"topics":["animated","expo","gesture-handler","moti","react-native","react-native-ui-library","reanimated","skia","ui-library"],"latest_commit_sha":null,"homepage":"https://aargonui.expo.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aargon007.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-18T13:39:10.000Z","updated_at":"2025-10-24T11:50:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"d58bcbff-2091-4617-805b-acdabab759bf","html_url":"https://github.com/aargon007/aargon-ui","commit_stats":null,"previous_names":["aargon007/aargon-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aargon007/aargon-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aargon007%2Faargon-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aargon007%2Faargon-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aargon007%2Faargon-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aargon007%2Faargon-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aargon007","download_url":"https://codeload.github.com/aargon007/aargon-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aargon007%2Faargon-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28335221,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","expo","gesture-handler","moti","react-native","react-native-ui-library","reanimated","skia","ui-library"],"created_at":"2026-01-12T05:37:10.991Z","updated_at":"2026-01-12T05:37:11.566Z","avatar_url":"https://github.com/aargon007.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Aargon UI 🎨✨\n\nAargon 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.\n\n\u003e 🚀 **Beta Available!** The unified `aargon-ui` package is now available in beta with all components bundled together for easier installation and usage.\n\n[![npm version](https://badge.fury.io/js/aargon-ui.svg)](https://www.npmjs.com/package/aargon-ui)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n\n## 🚀 Features\n\n- **Headless UI components** - Style them however you want\n- **Individual packages** - Install only what you need\n- **Turbo monorepo** - Fast builds and development\n- **TypeScript support** - Full type safety\n- **React Native 0.81.4** - Latest stable version\n- **Expo compatible** - Works with Expo ~54.0.10\n- **Optimized performance** - Built with Reanimated 4\n- **Accessibility** - Full accessibility support with ARIA attributes\n- **Customizable** - Complete theming and styling system\n\n## 📦 Installation Options\n\n### Option 1: Unified Package (Beta) 🚀\n\nInstall all components at once with the unified package:\n\n```bash\n# Install beta version\nnpm install aargon-ui@beta\n\n# Or with yarn\nyarn add aargon-ui@beta\n```\n\n**Benefits:**\n\n- ✅ Single package installation\n- ✅ All components included\n- ✅ Simplified imports\n- ✅ Consistent versioning\n\n### Option 2: Individual Packages 📦\n\nInstall only the components you need:\n\n```bash\n# Install specific components\nnpm install aargon-accordion aargon-button aargon-input\n\n# Or with yarn\nyarn add aargon-accordion aargon-button aargon-input\n```\n\n**Benefits:**\n\n- ✅ Smaller bundle size\n- ✅ Tree-shaking friendly\n- ✅ Granular control\n- ✅ Independent versioning\n\n## 📦 Packages\n\n### Core Components\n\n| Package                                     | Description                                      | npm                                                                                                       | Status         |\n| ------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------- | -------------- |\n| [**aargon-button**](packages/aargon-button) | Animated button component with multiple variants | [![npm version](https://badge.fury.io/js/aargon-button.svg)](https://www.npmjs.com/package/aargon-button) | 🚧 Coming Soon |\n| [**aargon-input**](packages/aargon-input)   | Animated input component with floating labels    | [![npm version](https://badge.fury.io/js/aargon-input.svg)](https://www.npmjs.com/package/aargon-input)   | 🚧 Coming Soon |\n| [**aargon-modal**](packages/aargon-modal)   | Animated modal component with backdrop           | [![npm version](https://badge.fury.io/js/aargon-modal.svg)](https://www.npmjs.com/package/aargon-modal)   | 🚧 Coming Soon |\n| [**aargon-card**](packages/aargon-card)     | Animated card component with shadows             | [![npm version](https://badge.fury.io/js/aargon-card.svg)](https://www.npmjs.com/package/aargon-card)     | 🚧 Coming Soon |\n| [**aargon-switch**](packages/aargon-switch) | Animated switch component                        | [![npm version](https://badge.fury.io/js/aargon-switch.svg)](https://www.npmjs.com/package/aargon-switch) | 🚧 Coming Soon |\n\n### Form Components\n\n| Package                                         | Description                 | npm                                                                                                           | Status         |\n| ----------------------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------- |\n| [**aargon-checkbox**](packages/aargon-checkbox) | Animated checkbox component | [![npm version](https://badge.fury.io/js/aargon-checkbox.svg)](https://www.npmjs.com/package/aargon-checkbox) | 🚧 Coming Soon |\n| [**aargon-radio**](packages/aargon-radio)       | Animated radio component    | [![npm version](https://badge.fury.io/js/aargon-radio.svg)](https://www.npmjs.com/package/aargon-radio)       | 🚧 Coming Soon |\n| [**aargon-select**](packages/aargon-select)     | Animated select component   | [![npm version](https://badge.fury.io/js/aargon-select.svg)](https://www.npmjs.com/package/aargon-select)     | 🚧 Coming Soon |\n| [**aargon-dropdown**](packages/aargon-dropdown) | Animated dropdown component | [![npm version](https://badge.fury.io/js/aargon-dropdown.svg)](https://www.npmjs.com/package/aargon-dropdown) | 🚧 Coming Soon |\n\n### Layout Components\n\n| Package                                           | Description                  | npm                                                                                                             | Status         |\n| ------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------- | -------------- |\n| [**aargon-accordion**](packages/aargon-accordion) | Animated accordion component | [![npm version](https://badge.fury.io/js/aargon-accordion.svg)](https://www.npmjs.com/package/aargon-accordion) | ✅ Published   |\n| [**aargon-badge**](packages/aargon-badge)         | Animated badge component     | [![npm version](https://badge.fury.io/js/aargon-badge.svg)](https://www.npmjs.com/package/aargon-badge)         | 🚧 Coming Soon |\n| [**aargon-progress**](packages/aargon-progress)   | Animated progress component  | [![npm version](https://badge.fury.io/js/aargon-progress.svg)](https://www.npmjs.com/package/aargon-progress)   | 🚧 Coming Soon |\n| [**aargon-skeleton**](packages/aargon-skeleton)   | Animated skeleton component  | [![npm version](https://badge.fury.io/js/aargon-skeleton.svg)](https://www.npmjs.com/package/aargon-skeleton)   | 🚧 Coming Soon |\n\n### Feedback Components\n\n| Package                                         | Description                 | npm                                                                                                           | Status         |\n| ----------------------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------- |\n| [**aargon-snackbar**](packages/aargon-snackbar) | Animated snackbar component | [![npm version](https://badge.fury.io/js/aargon-snackbar.svg)](https://www.npmjs.com/package/aargon-snackbar) | 🚧 Coming Soon |\n| [**aargon-toast**](packages/aargon-toast)       | Animated toast component    | [![npm version](https://badge.fury.io/js/aargon-toast.svg)](https://www.npmjs.com/package/aargon-toast)       | 🚧 Coming Soon |\n\n### Status Legend\n\n- ✅ **Published** - Available on npm\n- 🚧 **Coming Soon** - In development\n- 🔄 **In Progress** - Currently being worked on\n\n## 🚀 Quick Start\n\n### Using the Unified Package (Beta)\n\n```tsx\nimport React from 'react';\nimport { View, Text } from 'react-native';\nimport { AnimatedAccordion, AnimatedButton } from 'aargon-ui';\n\nexport default function App() {\n    return (\n        \u003cView\u003e\n            \u003cAnimatedAccordion title=\"Click to expand\"\u003e\n                \u003cText\u003eThis is the accordion content!\u003c/Text\u003e\n            \u003c/AnimatedAccordion\u003e\n\n            \u003cAnimatedButton onPress={() =\u003e console.log('Pressed!')}\u003eClick me!\u003c/AnimatedButton\u003e\n        \u003c/View\u003e\n    );\n}\n```\n\n### Using Individual Packages\n\n```tsx\nimport React from 'react';\nimport { View, Text } from 'react-native';\nimport { AnimatedAccordion } from 'aargon-accordion';\n\nexport default function App() {\n    return (\n        \u003cAnimatedAccordion title=\"Click to expand\"\u003e\n            \u003cText\u003eThis is the accordion content!\u003c/Text\u003e\n        \u003c/AnimatedAccordion\u003e\n    );\n}\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md) for detailed information on how to contribute to this project.\n\n### Quick Start for Contributors\n\n1. **Fork and clone** the repository\n2. **Install dependencies** with `yarn install`\n3. **Start development** with `yarn dev:source`\n4. **Create a feature branch** and make your changes\n5. **Submit a pull request** following our guidelines\n\nFor more detailed information, please read our [Contributing Guidelines](CONTRIBUTING.md).\n\n## 📖 Documentation\n\n- **Package Documentation** - Each package has its own README\n- **API Reference** - Comprehensive prop and type documentation\n- **Examples** - Live examples in the example app\n- **Changelog** - Version history and breaking changes\n\n## 🏗️ Architecture\n\n- **Monorepo**: Managed with Turbo for fast builds\n- **Individual packages**: Each component is a separate npm package\n- **Shared configuration**: Common TypeScript and build configs\n- **Example app**: Demonstrates all components in `examples/`\n- **TypeScript**: Full type safety across all packages\n- **Hot reload**: Instant development with source files\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- **React Native Reanimated** - For smooth animations\n- **Lucide React Native** - For beautiful icons\n- **Expo** - For the amazing development platform\n- **Turbo** - For fast monorepo builds\n- **All contributors** - Thank you for making this project better!\n\n---\n\nMade with ❤️ by [Aargon](https://github.com/aargon007)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faargon007%2Faargon-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faargon007%2Faargon-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faargon007%2Faargon-ui/lists"}