# ui-cubic

> Styled UI Components for React Web Apps

Latest version **1.0.3** (published 2020-07-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install ui-cubic
pnpm add ui-cubic
yarn add ui-cubic
bun add ui-cubic
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-07-31 |
| First published | 2019-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 127.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | DalerLeo |
| Maintainers | dalerleo |
| Keywords | components, react, react-component, ui, design-system, styled-components |

## Links

- npm: https://www.npmjs.com/package/ui-cubic
- Repository: https://github.com/wienerdeming/ui-cubic
- Homepage: https://github.com/wienerdeming/ui-cubic#readme
- Issues: https://github.com/wienerdeming/ui-cubic/issues
- npm.io page: https://npm.io/package/ui-cubic

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-fast-compare](https://npm.io/package/react-fast-compare.md) ^3.0.1

## 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.0.3 (latest) — 2020-07-31
- 1.0.1 (beta2) — 2020-07-19
- 1.0.0 (beta) — 2020-07-19
- 0.1.9-alpha.0 (alpha) — 2019-06-15
- 1.0.2 — 2020-07-19
- 0.6.7 — 2020-07-19
- 0.6.6 — 2020-06-13
- 0.6.5 — 2020-06-13
- 0.6.4 — 2020-06-13
- 0.6.3 — 2020-06-13
- 0.6.2 — 2020-06-13
- 0.6.1 — 2020-06-01
- 0.6.0 — 2020-05-17
- 0.5.1 — 2020-05-16
- 0.5.0 — 2020-05-16
- … 24 more at https://npm.io/package/ui-cubic/versions

## README

# UI-CUBIC

React primitive UI components built with [styled-components][].

[![Downloads][downloads-badge]][npm]
[![Version][version-badge]][npm]
[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
[![MIT License][license-badge]](LICENSE.md)


[downloads-badge]: https://flat.badgen.net/npm/dw/ui-cubic
[version-badge]: https://flat.badgen.net/npm/v/ui-cubic
[license-badge]: https://flat.badgen.net/badge/license/MIT/blue
[npm]: https://npmjs.com/package/ui-cubic

```sh
npm i ui-cubic
```
or 
```sh
yarn add ui-cubic
```

## Getting Started


**Note:** For now, You have to wrap your main Component with CubeThemeProvider


```jsx
import React from 'react'
import {Button, CubeThemeProvider} from 'ui-cubic'

export default props =>
  <CubeThemeProvider>
    <Button>UI-Cubic</Button>
  </CubeThemeProvider>
```


By proving theme props you can customize styling


```jsx
import React from 'react'
import {Button, CubeThemeProvider} from 'ui-cubic'
const theme = {
    boxShadow: '0px 4px 15px rgba(211, 216, 224, 0.5)',
    borderRadius: '5px',
    palette: {
      text: {
        main: '#36434E',
        light: '#9AA6AC',
      },
      primary: {
        main: '#2F80ED',
        text: '#fff',
        hover: '#2F73DF',
        active: '#2F80ED',
        focus: '#2F80ED'
      },
      secondary: {
        main: '#e3e7ea',
        text: '#73839c',
        hover: '#d3d7da',
        active: '#d3d7da',
        focus: '#d3d7da'
      },
      danger: {
        main: '#FF2E63',
        text: '#fff',
        hover: '#FF2E63',
        active: '#FF2E63',
        focus: '#FF2E63'
      },
      warning: {
        main: '#E7A324'
      }
    },
    input: {
      borderRadius: '10px',
      colors: {
        background: '#F1F3F5',
        hover: '#EDEFF2',
        label: '#8F9BB0',
        placeholder: '#AEB7C6',
        border: '#e0e0e0',
        icon: '#9AA6AC'
      }
    }
  }

export default props =>
  <CubeThemeProvider theme={theme}>
    <Button>UI-Cubic</Button>
  </CubeThemeProvider>
```



When all values for theming is provided, the usage of CubeThemeProvider is not required,
You can just pass cube object to Styled-Components's ThemeProvider


```jsx
import React from 'react'
import {ThemeProvider} from 'styled-component'
import {Button, CubeThemeProvider} from 'ui-cubic'
const cubeTheme = {
    boxShadow: '0px 4px 15px rgba(211, 216, 224, 0.5)',
    borderRadius: '5px',
    palette: {
      text: {
        main: '#36434E',
        light: '#9AA6AC',
      },
      primary: {
        main: '#2F80ED',
        text: '#fff',
        hover: '#2F73DF',
        active: '#2F80ED',
        focus: '#2F80ED'
      },
      secondary: {
        main: '#e3e7ea',
        text: '#73839c',
        hover: '#d3d7da',
        active: '#d3d7da',
        focus: '#d3d7da'
      },
      danger: {
        main: '#FF2E63',
        text: '#fff',
        hover: '#FF2E63',
        active: '#FF2E63',
        focus: '#FF2E63'
      },
      warning: {
        main: '#E7A324'
      }
    },
    input: {
      borderRadius: '10px',
      colors: {
        background: '#F1F3F5',
        hover: '#EDEFF2',
        label: '#8F9BB0',
        placeholder: '#AEB7C6',
        border: '#e0e0e0',
        icon: '#9AA6AC'
      }
    }
  }

const theme = {
    // Your values ...
    .... 
    //
    cube: cubeTheme,

}
export default props =>
  <ThemeProvider theme={theme}>
    <Button>UI-Cubic</Button>
  </CubeThemeProvider>
```

## Principles

UI-Cubic is built with the following principles in mind.

- **Minimal**
- **Useful**
- **Themeable**

### Related

- [styled-components][]


[styled-components]: https://github.com/styled-components/styled-components


---

[MIT License](LICENSE.md)

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