# @mooveit-team/react-ui > Mooveit React UI Latest version **1.3.8** (published 2020-07-06) · MIT license · 0 weekly downloads ## Install ```sh npm install @mooveit-team/react-ui pnpm add @mooveit-team/react-ui yarn add @mooveit-team/react-ui bun add @mooveit-team/react-ui ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.3.8 | | Published | 2020-07-06 | | First published | 2018-09-18 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 21 | | Unpacked size | 2.2 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | cecilia.gutierrez, dlotero-it, francosimeone, ghaynes1292, gogumai, laragno, leonardovalmooveit, renzo.scuadroni, renzomuzi, snmgian | ## Links - npm: https://www.npmjs.com/package/@mooveit-team/react-ui - Repository: https://github.com/moove-it/react-ui - Homepage: https://github.com/moove-it/react-ui#readme - Issues: https://github.com/moove-it/react-ui/issues - npm.io page: https://npm.io/package/@mooveit-team/react-ui ## Dependencies (21) - [react](https://npm.io/package/react.md) ^16.9.0 - [lodash](https://npm.io/package/lodash.md) ^4.17.15 - [moment](https://npm.io/package/moment.md) ^2.24.0 - [basscss](https://npm.io/package/basscss.md) ^8.1.0 - [numeral](https://npm.io/package/numeral.md) ^2.0.6 - [react-dom](https://npm.io/package/react-dom.md) ^16.9.0 - [classnames](https://npm.io/package/classnames.md) ^2.2.5 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0 - [basscss-forms](https://npm.io/package/basscss-forms.md) ^1.0.0 - [react-tooltip](https://npm.io/package/react-tooltip.md) ^3.11.0 - [basscss-colors](https://npm.io/package/basscss-colors.md) ^2.2.0 - [basscss-layout](https://npm.io/package/basscss-layout.md) ^3.1.0 - [basscss-lighten](https://npm.io/package/basscss-lighten.md) ^1.1.0 - [react-day-picker](https://npm.io/package/react-day-picker.md) ^7.3.2 - [basscss-base-forms](https://npm.io/package/basscss-base-forms.md) ^2.0.2 - [immutability-helper](https://npm.io/package/immutability-helper.md) ^2.9.1 - [react-onclickoutside](https://npm.io/package/react-onclickoutside.md) ^6.9.0 - [basscss-border-colors](https://npm.io/package/basscss-border-colors.md) ^2.1.0 - [react-moment-proptypes](https://npm.io/package/react-moment-proptypes.md) ^1.7.0 - [basscss-background-colors](https://npm.io/package/basscss-background-colors.md) ^2.1.0 ## Recent versions - 1.3.8 (latest) — 2020-07-06 - 1.3.7 — 2020-06-26 - 1.3.6 — 2020-06-08 - 1.3.5 — 2020-04-01 - 1.3.4 — 2020-01-15 - 1.3.3 — 2020-01-09 - 1.3.2 — 2020-01-07 - 1.3.1 — 2019-12-16 - 1.3.0 — 2019-11-26 - 1.2.12 — 2019-11-25 - 1.2.9 — 2019-11-22 - 1.2.8 — 2019-10-16 - 1.2.6 — 2019-09-04 - 1.2.5 — 2019-08-07 - 1.2.4 — 2019-05-23 - … 13 more at https://npm.io/package/@mooveit-team/react-ui/versions ## README # React-UI react-ui is a collection of generic components and helpers used by the Mooveit development team on their projects. ## Installation react-ui is available as an npm package, so you can install it with your package manager of preference. For example: ``` npm i @mooveit-team/react-ui ``` ## Usage The following modules are available: - `@mooveit-team/react-ui/ui`: Contains all the UI components available. - `@mooveit-team/react-ui/forms`: Subset of `ui` with form components. - `@mooveit-team/react-ui/utils`: Collection of helpers used for formatting, parsing data, etc. In order to use @mooveit-team/react-ui style you will need to add them to your project: ``` @import '@mooveit-team/react-ui/kd-styles'; @import '@mooveit-team/react-ui/variables'; @import '@mooveit-team/react-ui/styles'; @import '@mooveit-team/react-ui/styles-font-awesome'; ``` ### Color Customization if you want to change the colors of the default styles of the component you have two options: #### 1. Using one of the default color palletes Currently we have two options in separate files, you can import the one that you want to override the styles: 1. `variables.css`: Default styling 2. `variables-pw-ui.css`: pw-ui color pallete. #### 2. Overriding the css variables by hand The following variables are used to define the colors of the default styles: ```css # Example default styles, you can change the ones that you need. :root { --gray-primary: #686865; --gray-primary-active: #585858; --gray-secondary: #BABABA; --gray-background: #F4F4F4; --gray-background-muted: color-mod(var(--gray-primary) alpha(80%)); --gray-border: #DDDDDD; --gray-header: #f5f5f5; --green-success: #85CCB8; --green-primary: #369f31; --primary: #0a0a36; --primary-active: #18189b; --primary-hover: #2c2cb1; --primary-hover-muted: #2c2cb1cc; --primary-highlight: #f0f0fc; --crimson: #FD0808; --sky-blue: #65b3d0; --sky-blue-highlight: color-mod(var(--sky-blue) alpha(40%));; --sky-blue-dark: #316eaa; --white: #FFFFFF; --white-muted: #FFFFFF90; --transparent: #FFFFFF00; } ``` ## Building the project locally If you want to make changes to the library (maybe even contribute!). You can clone the project and get it up and running with the following steps: ``` git clone git@github.com:moove-it/react-ui.git cd @mooveit-team/react-ui npm install npm run build # If you want to build only npm run build:watch # If you want to try changes immediately ``` ## Storybook @mooveit-team/react-ui has [Storybook](https://github.com/storybooks/storybook) it allows you to browse a component library, view the different states of each component, and interactively develop and test components. You can use the public instance [available here](https://moove-it.github.io/react-ui) or clone the project and run it locally with `npm run storybook` ## Contributing If you want to contribute, please check the [contributing guidelines](./CONTRIBUTING.md) --- _Source: https://npm.io/package/@mooveit-team/react-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._