npm package: @react-pakistan/react-ui-collection
Description: React UI Collection built upon React Storybook
Author: Taimoor Khan
Latest version: 6.0.0

# 📌 React Pakistan 🔥🔥🔥

<div>
  <a
    href="https://react-pakistan.github.io/react-pakistan-docs/"
    target="_blank"
  >
    <img
      alt="React Pakistan - React UI Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1565548545/GitHub/optimised/React_Pakistan_Storybook_Logo.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://react-pakistan.github.io/react-pakistan-docs/"
    target="_blank"
  >
    <img
      alt="Taimoor Khan - React UI Collection Author"
      src="https://avatars1.githubusercontent.com/u/27800340?s=460&v=4"
      width="20%"
    />
  </a>
</div>

React Pakistan is an OpenSource & Free Software (FOSS) platform, creating React software solutions for the global community. ⭐⭐⭐

[![License](https://img.shields.io/github/license/react-pakistan/react-native-boilerplate.svg)](https://github.com/react-pakistan/react-native-boilerplate/blob/master/LICENSE)
[![Followers](https://img.shields.io/github/followers/taimoormk.svg?style=social)](https://github.com/taimoormk)
[![Forks](https://img.shields.io/github/forks/react-pakistan/react-native-boilerplate.svg?style=social)](https://github.com/react-pakistan/react-native-boilerplate)
[![Stars](https://img.shields.io/github/stars/react-pakistan/react-native-boilerplate.svg?style=social)](https://github.com/react-pakistan/react-native-boilerplate)

![React UI Collection Badge Branches](./badges/badge-branches.svg)
![React UI Collection Badge Functions](./badges/badge-functions.svg)
![React UI Collection Badge Lines](./badges/badge-lines.svg)
![React UI Collection Badge Statements](./badges/badge-statements.svg)

[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://GitHub.com/Taimoormk/StrapDown.js/graphs/commit-activity)
![Maintaner](https://img.shields.io/badge/maintainer-TaimoorKhan-blue)
[![Website shields.io](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](http://shields.io/)
[![Ask Me Anything !](https://img.shields.io/badge/Ask%20me-anything-1abc9c.svg)](https://GitHub.com/Taimoormk/ama)

[![Ryo-ma's github trophy](https://github-profile-trophy.vercel.app/?username=Taimoormk&row=1)](https://github.com/ryo-ma/github-profile-trophy)

[![DenverCoder1's github streak](https://github-readme-streak-stats.herokuapp.com/?user=Taimoormk&theme=blue-green)](https://github.com/DenverCoder1/github-readme-streak-stats)

[![Sparkline](https://stars.medv.io/Naereen/badges.svg)](https://stars.medv.io/react-pakistan/react-native-icon-collection)

[![saythanks](https://img.shields.io/badge/say-thanks-ff69b4.svg)](https://saythanks.io/to/Taimoormk)

## 📌 React UI Collection ✌

<div>
  <a
    href="https://react-ui-collection.surge.sh"
    target="_blank"
  >
    <img
      alt="React Pakistan - React UI Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1671950784/React%20Pakistan/react-ui-collection.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://www.npmjs.com/package/@react-pakistan/react-ui-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React UI Collection - NPM Package"
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY1K6JwhYEBfsv52nUT30dAIjoFyp252cH6VVkhXB_Gq1bUSz-"
      width="20%"
    />
  </a>
</div>

A generic to specific, UI/UX library for React web apps, following modern approach by building your project's UI in isolation using state of the art Storybook along with React.

### 📌 Table of Contents 🚀

- [Demo](#-demo-) ✨
- [Technology Stack](#-technology-stack-) ✨
- [Installation](#-installation-) ✨
- [Usage](#-usage-) ✨
- [Styles](#-styles-) ✨
- [Tested](#-tested-) ✨
- [Contributors](#-contributors-) ✨
- [Other Libraries from ReactPakistan](#-other-libraries-from-reactpakistan) ✨
- [Support](#-support) ✨
- [Contact](#-contact) ✨
- [Buy Me Coffee](#-buy-me-coffee) ✨

### 📌 Demo 🚀

Checkout [React UI Collection](https://taimoormk.github.io/react-ui-collection)

### 📌 Technology Stack 🚀

- [React](https://reactjs.org/) ✨
- [Storybook](https://storybook.js.org/) ✨
- [TypeScript](https://www.typescriptlang.org/) ✨
- [JavaScript](https://javascript.info/) ✨
- [Styled Components](https://styled-components.com/) ✨
- [Jest](https://jestjs.io/) ✨
- [Eslint](https://eslint.org/) ✨

### 📌 Installation 🚀

- Clone the repo
- Cd into the project folder
- Figure out which package manager you have on your system, then run following commands for their specific use cases.
```console
  // to install dependencies
  yarn
  // to start local dev server
  yarn start
  // to run all tests locally
  yarn test
```
OR
```console
  // to install dependencies
  npm install
  // to start local dev server
  npm start
  // to run all tests locally
  npm test
```

## 📌 Usage 🚀

Add React UI Collection to your project. 

```console
  yarn add @react-pakistan/react-ui-collection
```
OR
```console
  npm install @react-pakistan/react-ui-collection
```

Add React UI Collection base theme to your project.

```console
  yarn add @react-pakistan/util-functions
```
OR
```console
  npm install @react-pakistan/util-functions
```

Refer to [React Pakistan Docs](https://react-pakistan.github.io/react-pakistan-docs) for detail usage docs.

### 📌 Styles 🚀

Styled Components are employed to maintain and update theme for this project. Please consider adding Styled Component Provider wrapper to the entry point of your application, following is the sample code.
You could either use the default theme as shown below or wire your custom theme object instead. See <a href="/docs/styleguide-typography--typography-story">Typography</a> & <a href="/docs/styleguide-colors--colors-story">Colors</a> being used in the theme object.

```javascript
  import { ThemeProvider } from 'styled-components';
  import { theme } from '@react-pakistan/util-functions';

  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
```

### 📌 Tested 🚀

We aim to achieve 100% coverage and we shall...

Should you like this project and would like to see more coming in future, please consider giving a ⭐ on Github project repo.

### 📌 Contributors 🚀

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

| Contributors        | GitHub           | Emoji  |
| ------------- |:-------------:|:-----:|
| <img src="https://avatars0.githubusercontent.com/u/27800340?s=150&v=4" /> | <a href="https://github.com/taimoormk">Taimoor Khan</a> | 🎨🤔🚧📆👀⚠️ |

### 📌 Other Libraries from ReactPakistan 🚀

<div>
  <a
    href="https://react-commons-collection.surge.sh"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Commons Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1671950783/React%20Pakistan/react-commons-collection.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://www.npmjs.com/package/@react-pakistan/react-commons-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Commons Collection - NPM Package"
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY1K6JwhYEBfsv52nUT30dAIjoFyp252cH6VVkhXB_Gq1bUSz-"
      width="20%"
    />
  </a>
</div>

<div>
  <a
    href="https://react-pakistan.github.io/react-icon-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Icon Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1671950784/React%20Pakistan/react-icon-collection.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://www.npmjs.com/package/@react-pakistan/react-icon-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Icon Collection - NPM Package"
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY1K6JwhYEBfsv52nUT30dAIjoFyp252cH6VVkhXB_Gq1bUSz-"
      width="20%"
    />
  </a>
</div>

<div>
  <a
    href="https://react-pakistan.github.io/react-logo-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Logo Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1671950784/React%20Pakistan/react-logo-collection.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://www.npmjs.com/package/@react-pakistan/react-logo-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Logo Collection - NPM Package"
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY1K6JwhYEBfsv52nUT30dAIjoFyp252cH6VVkhXB_Gq1bUSz-"
      width="20%"
    />
  </a>
</div>

<div>
  <a
    href="https://react-pakistan.github.io/react-emoji-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Emoji Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1671950784/React%20Pakistan/react-emoji-collection.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://www.npmjs.com/package/@react-pakistan/react-emoji-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Emoji Collection - NPM Package"
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY1K6JwhYEBfsv52nUT30dAIjoFyp252cH6VVkhXB_Gq1bUSz-"
      width="20%"
    />
  </a>
</div>

<div>
  <a
    href="https://react-pakistan.github.io/react-native-commons-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Native Commons Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1672213225/React%20Pakistan/react-native-commons-collection.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://www.npmjs.com/package/@react-pakistan/react-native-commons-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Native Commons Collection - NPM Package"
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY1K6JwhYEBfsv52nUT30dAIjoFyp252cH6VVkhXB_Gq1bUSz-"
      width="20%"
    />
  </a>
</div>

<div>
  <a
    href="https://react-pakistan.github.io/react-native-ui-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Native Ui Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1672213225/React%20Pakistan/react-native-ui-collection.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://www.npmjs.com/package/@react-pakistan/react-native-ui-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Native Ui Collection - NPM Package"
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY1K6JwhYEBfsv52nUT30dAIjoFyp252cH6VVkhXB_Gq1bUSz-"
      width="20%"
    />
  </a>
</div>

<div>
  <a
    href="https://react-pakistan.github.io/react-native-icon-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Native Icon Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1672213225/React%20Pakistan/react-native-icon-collection.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://www.npmjs.com/package/@react-pakistan/react-native-icon-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Native Icon Collection - NPM Package"
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY1K6JwhYEBfsv52nUT30dAIjoFyp252cH6VVkhXB_Gq1bUSz-"
      width="20%"
    />
  </a>
</div>

<div>
  <a
    href="https://react-pakistan.github.io/react-native-logo-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Native Logo Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1672213225/React%20Pakistan/react-native-logo-collection.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://www.npmjs.com/package/@react-pakistan/react-native-logo-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Native Logo Collection - NPM Package"
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY1K6JwhYEBfsv52nUT30dAIjoFyp252cH6VVkhXB_Gq1bUSz-"
      width="20%"
    />
  </a>
</div>

<div>
  <a
    href="https://react-pakistan.github.io/react-native-emoji-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Native Emoji Collection"
      src="https://res.cloudinary.com/dq6hflqwx/image/upload/v1672213225/React%20Pakistan/react-native-emoji-collection.jpg"
      width="70%"
    />
  </a>
  <a
    href="https://www.npmjs.com/package/@react-pakistan/react-native-emoji-collection"
    target="_blank"
  >
    <img
      alt="React Pakistan - React Native Emoji Collection - NPM Package"
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY1K6JwhYEBfsv52nUT30dAIjoFyp252cH6VVkhXB_Gq1bUSz-"
      width="20%"
    />
  </a>
</div>

### 📌 Support 🚀

If you need any help or have any question, please feel free to join ReactPakistan community at [React Pakistan Slack](reactpakistan.slack.com).

### 📌 Contact 🚀

I can be reachable via [Taimoor Web](https://taimoor.io) or else should you wish to send over an expression of your interest to contribute towards ReactPakistan, please shoot an [email](mailto:react.pakistan14@gmail.com).

### 📌 Buy me Coffee 🚀

<a
  href="https://www.buymeacoffee.com/60whp8FM3"
  target="_blank">
  <img
    alt="Buy Me A Coffee"
    src="https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/custom_images/yellow_img.png"
  />
</a>