React Native Forge UI

A beautiful, customizable UI component library for React Native, inspired by shadcn/ui design principles.

Getting Started

React Native Forge UI uses a CLI-first approach similar to shadcn/ui. Instead of installing a package with pre-built components, you add the components directly to your project, giving you full control over the code.

Installation

To get started with React Native Forge UI, run the following command in your React Native project:

npx react-native-forge-ui@latest init

This command will:

1. Set up the necessary files and directories in your project
2. Ask if you want to use NativeWind v4 for styling or just plain StyleSheet
3. Configure your project with the selected styling option

Adding Components

Once you've initialized the library, you can add components to your project using the CLI:

npx react-native-forge-ui@latest add button

This will add the Button component to your project. You can add other components in the same way:

npx react-native-forge-ui@latest add input

Features

• 🎨 Customizable: Easily customize components with variants, sizes, and states
• 🧩 Modular: Use only the components you need
• 📱 React Native First: Built specifically for React Native
• 🔍 TypeScript: Fully typed components for a better developer experience
• 🎭 Themeable: Customize the theme to match your brand
• ⚡ Performance Optimized: Memoized components and styles for better performance
• 🚀 Fast Rendering: Hardware acceleration hints and optimized style calculations

Usage

Button Component

import { Button } from './src/components/ui';

export default function App() {
  return (
    <Button
      variant="primary"
      size="default"
      onPress={() => console.log('Button pressed')}
    >
      Click Me
    </Button>
  );
}

Input Component

import { Input } from './src/components/ui';

export default function App() {
  return (
    <Input
      placeholder="Enter your name"
      variant="outline"
      size="default"
    />
  );
}

Available Components

• Button: A customizable button component with various variants and sizes
• Input: A text input component with various variants, sizes, and states

Customization

You can customize the components by passing style props:

<Button
  variant="primary"
  buttonStyle={{ backgroundColor: '#ff0000' }}
  textStyle={{ color: '#ffffff' }}
  onPress={() => {}}
>
  Custom Button
</Button>

Documentation

For more detailed documentation, see the component README.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library