# react-beauty

> A beautiful React component library

Latest version **1.1.3** (published 2021-12-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-beauty
pnpm add react-beauty
yarn add react-beauty
bun add react-beauty
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score; declining downloads.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2021-12-25 |
| First published | 2021-12-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 135.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Safa Elmali |
| Maintainers | safaelmali |
| Keywords | react, ui, design-system, react-components, uikit, accessible, components, emotion, library, design-system |

## Links

- npm: https://www.npmjs.com/package/react-beauty
- Repository: https://github.com/SafaElmali/react-beauty
- Homepage: https://github.com/SafaElmali/react-beauty#readme
- Issues: https://github.com/SafaElmali/react-beauty/issues
- npm.io page: https://npm.io/package/react-beauty

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2021-12-25
- 1.1.2 — 2021-12-25
- 1.1.1 — 2021-12-25
- 1.1.0 — 2021-12-24

## README

<div align="center">
  <h1>🌸 React Beauty 🌸</h1>
  <h3>An experimental component library</h3>
   
  <i>Inspired by [Chakra UI](https://github.com/chakra-ui/chakra-ui)</i>  
</div>

<hr/>

<p align="center">
  <img alt="Bundle Size" src="https://badgen.net/bundlephobia/minzip/react-beauty"/>
  <img alt="MIT License" src="https://img.shields.io/github/license/chakra-ui/chakra-ui"/>
  <img alt="NPM" src="https://img.shields.io/npm/v/react-beauty.svg"/>
  <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/react-beauty.svg?style=flat"/>
  <img alt="Github Stars" src="https://badgen.net/github/stars/safaelmali/react-beauty" />
</p>

## Installation

Inside your React project directory, install React Beauty by running either of the following:

`npm i react-beauty`

### Set up Provider

For React Beauty to work correctly, you need to set up the BeautyProvider at the root of your application.

Go to the root of your application and do this:

```js
import * as React from 'react'

// 1. import `BeautyProvider` component
import { BeautyProvider } from 'react-beauty'

function App({ Component }) {
  // 2. Use at the root of your app
  return (
    <BeautyProvider>
      <Component />
    </BeautyProvider>
  )
}
```

Now you are ready to start using components 🥳

## Storybook

Access Public Storybook [in here](https://61bf02a98b82d5003a56087a-boidushmnv.chromatic.com)

## Documentation

Access Public Documentation [in here](https://safaelmalidev.gitbook.io/design-system/)


## License

react-beauty is [MIT licensed](./LICENSE).

---
_Source: https://npm.io/package/react-beauty · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._