<div 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>

<br /><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/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"> 
</p>


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

<div align="center">
<a href="https://docs.pearl-ui.dev/docs/overview/getting-started/introduction">Getting Started</a> •
<a href="">Demo</a> •
<a href="https://docs.pearl-ui.dev/docs/overview/getting-started/installation">Installation</a> •
<a href="#documentation">Documentation</a>

</div>

<br />

</div>

<p>
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>

## Features

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

- **Open Source and Free** 🆓: Completely open source and free to use.
- **Universal Compatibility** 🌐: Write once and run on iOS, Android, and Web, thanks to the power of [Expo](https://docs.expo.dev/), [React Native](https://reactnative.dev/), and [React Native for Web](https://necolas.github.io/react-native-web/).
- **Rich Component Library** 📚: Growing library of built-in components with the flexibility to create custom components as needed.
- **Theming Control** 🎨: Full control over the theme for a highly customizable UI.
- **Animation Support** 🎬: Out-of-the-box support for animations using [Moti](https://moti.fyi/).
- **Dark Mode** 🌙: Dark mode support out-of-the-box, to make it easy to cater to user preferences.
- **Responsive Design** 📱: Support for responsive design using breakpoints to ensure your application 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** ♿: Accessible by default, adhering to official Android and Apple guidelines.
- **Fully Typed** 🦾: Completely types using Typescript to ensure type safety and enhancing developer productivity.
- **Powerful API** 💪: Powerful API 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 the [official website](https://docs.pearl-ui.dev/).

## Contributing

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

## 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!
