<h1 align="center">
  <a href="https://docs.pearl-ui.dev/">
    <img width="346" alt="logo" src="https://user-images.githubusercontent.com/29514438/133960518-569428c5-fe04-4631-b20e-5935a4c93914.png">
  </a>
</h1>

<h4 align="center">Build consistent cross-platform mobile apps at <span style="color: #6356e5">lightning speed</span></h4>

<p align="center">
Pearl UI is a user-friendly UI library for React Native, offering ready-to-use components, framer-motion-like animations, dark mode, and responsive design. With its design-first approach and intuitive styling system, Pearl UI greatly enhances developer efficiency, simplifying and accelerating app development.
</p>

<br />

<p align="center" style="width: 80%; margin: auto">

<img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/agrawal-rohit/pearl-ui/Publish.yml">
<img alt="Codacy coverage" src="https://img.shields.io/codacy/coverage/d0c9aeda98434aa4adfa8446823aead4">
<img alt="npm" src="https://img.shields.io/npm/v/pearl-ui">
<img alt="npm" src="https://img.shields.io/npm/dw/pearl-ui">
<img alt="Codacy grade" src="https://img.shields.io/codacy/grade/d0c9aeda98434aa4adfa8446823aead4">
<img alt="Licence" src="https://img.shields.io/github/license/agrawal-rohit/pearl-ui">
<!-- <img alt="GitHub commit activity (branch)" src="https://img.shields.io/github/commit-activity/w/agrawal-rohit/pearl-ui/next"> -->
<a href="https://github.com/agrawal-rohit/pearl-ui/discussions">
<img alt="GitHub Discussions" src="https://img.shields.io/github/discussions/agrawal-rohit/pearl-ui">
</a>
<a href="https://twitter.com/_rohitagrawal_">
<img alt="Twitter URL" src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Ftwitter.com%2F_rohitagrawal_">
</a>
</p>

<br />

## Table of Contents

- [Key Features](#key-features)
- [Installation](#installation)
- [Documentation](#documentation)
- [Changelog](#changelog)
- [Support](#support)
- [License](#license)

## Key Features

Pearl UI is a comprehensive UI library for React Native projects, offering a wide range of features:

- **Open Source and Free** 🆓: Pearl UI is completely open source and free to use.
- **Universal Compatibility** 🌐: Write once and run on both iOS and Android platforms, thanks to the power of [Expo](https://docs.expo.dev/) and [React Native](https://reactnative.dev/).
- **Rich Component Library** 📚: Over 15 built-in components are available, with the flexibility to create custom components as needed.
- **Theming Control** 🎨: Full control over the theme allows for a highly customizable UI.
- **Animation Support** 🎬: Out-of-the-box support for animations using [Moti](https://moti.fyi/).
- **Dark Mode** 🌙: Dark mode is supported out-of-the-box, making it easy to cater to user preferences.
- **Responsive Design** 📱: Support for responsive design using breakpoints ensures your UI looks great on any device.
- **Fast Development** ⚡: Speed up your development process with [style props](https://docs.pearl-ui.dev/docs/core-features/style-props).
- **Accessibility** ♿: Pearl UI is accessible by default, adhering to official Android and Apple guidelines.
- **Strong Typescript Support** 🦾: Typescript is fully supported, ensuring type safety and enhancing developer productivity.
- **Powerful API** 💪: A powerful API is available for creating custom components, providing flexibility and control.

## Installation

To install Pearl UI in your React Native/Expo project directory, execute one of the following commands:

**npm**

```shell
$ npm install pearl-ui
```

**yarn**

```shell
$ yarn add pearl-ui
```

## Documentation

For comprehensive usage instructions and API documentation, please visit our [official website](https://www.pearl-ui.dev/).

## Changelog

To keep track of all the changes and updates, please refer to our [changelog](https://github.com/agrawal-rohit/pearl-ui/blob/main/CHANGELOG.md) and [GitHub releases](https://github.com/agrawal-rohit/pearl-ui/releases).

## Support

If you find our project useful and want to support us, consider buying us a coffee. Click on the image below to proceed:
<a href="https://www.buymeacoffee.com/rohitagrawal" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

## Contributing

We welcome contributions from the community. For instructions on how to set up the repository locally, build, test, and contribute, please refer to our [CONTRIBUTING.md](./CONTRIBUTING.md) guide.

## Code of Conduct

We believe in fostering an open and welcoming environment. To ensure that, we have a [Code of Conduct](./CODE_OF_CONDUCT.md) that we expect all contributors to adhere to.

## License

Pearl UI is licensed under the [MIT License](https://github.com/agrawal-rohit/pearl-ui/blob/main/LICENSE).

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="http://nayanpatel.net"><img src="https://avatars.githubusercontent.com/u/79650289?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nayan Patel</b></sub></a><br /><a href="https://github.com/agrawal-rohit/pearl-ui/commits?author=PatelN123" title="Documentation">📖</a> <a href="https://github.com/agrawal-rohit/pearl-ui/issues?q=author%3APatelN123" title="Bug reports">🐛</a></td>
    <td align="center"><a href="http://yalla.ma"><img src="https://avatars.githubusercontent.com/u/198514?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Younes</b></sub></a><br /><a href="#security-younes200" title="Security">🛡️</a></td>
  </tr>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
