@trendui/react-native

TrendUI - React Native UI Library

TrendUI is a modern and lightweight React Native UI library designed to simplify mobile app development. It offers a collection of customizable, prebuilt components to help developers build beautiful, performant, and consistent user interfaces with ease.

✨ Key Features

• Wide Range of Components: Includes versatile components such as Button, TextInput, Image, Select, and more.
• Customizable & Flexible: Fully customizable components with support for styles, themes, and variants to match your design system.
• Easy CLI Integration: Use the TrendUI CLI to initialize or add components seamlessly to your project.
• Optimized for React Native: Tailored for performance and smooth rendering on both iOS and Android platforms.
• Supports TailwindCSS: Integrated support for twrnc and nativewind for rapid styling with TailwindCSS utility classes.

🚀 Getting Started

Follow these steps to set up TrendUI in your React Native project.

1. Installation

Install the library and required peer dependencies:

Using npm:

npm install @trendui/react-native --save

Using yarn:

yarn add @trendui/react-native

2. CLI Setup (Optional)

TrendUI provides a CLI to streamline the process of adding components to your project.

Link the CLI locally (for testing/development):

npm link

Use the CLI Commands:

• Initialize TrendUI in your project:

  npx trendui init
  

• Add Specific Components:

  npx trendui add button textinput
  

• List Available Components:

  npx trendui list
  

📦 Components List

TrendUI comes with a variety of prebuilt components:

Component	Description
Button	A customizable button component
TextInput	A flexible input field for user text
Image	An image component with animation loader
Text	Styled text component with themes
Select	Dropdown component for selections

🔧 Configuration

Create a trendui.config.js file in the root of your project to configure where components are installed.

module.exports = {
  componentPath: "/trendui", // Path where components will be added
};

📘 Available CLI Commands

Command	Description
npx trendui init	Initialize TrendUI in your project
npx trendui add <name>	Add specific components to your project
npx trendui list	List all available components

🧩 Directory Structure

After installing components, your project structure will look like this:

/trendui
    /Button
      Button.tsx
      index.tsx
      Readme.md
    /TextInput
      TextInput.tsx
      index.tsx
      Readme.md
    index.tsx

The index.tsx file will auto-export all components, allowing you to import components seamlessly:

import { Button, TextInput } from '@/trendui';

🌟 Contribution

Contributions are always welcome! To contribute:

• Fork the repository.
• Create a new branch: feature/your-feature-name.
• Commit your changes: git commit -m "Add a new feature".
• Push the changes: git push origin feature/your-feature-name.
• Submit a pull request.

🛡 License

This project is licensed under the MIT License.

💬 Support

If you face any issues or have suggestions, feel free to open an issue in the repository.

🎉 Stay Updated

Follow TrendUI on GitHub to get the latest updates and features.

Enjoy building your React Native apps faster and better with TrendUI! 🚀