/ui-cubic

Styled Components for React App

Primary LanguageJavaScript

UI-CUBIC

React primitive UI components built with styled-components.

Downloads Version MIT License

npm i ui-cubic

or

yarn add ui-cubic

Getting Started

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

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

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

By proving theme props ypu can customize styling

import React from 'react'
import {Button, CubeThemeProvider} from 'ui-cubic'
const theme = {
  shadows: {
    sm: '',
    md: '',
    lg: ''
  },
  palette: {
    primary: {
      main: '',
      light: '',
      dark: '',
      hover: '',
      active: '',
      focus: ''
    },
    secondary: {
      main: '',
      light: '',
      dark: '',
      hover: '',
      active: '',
      focus: ''

    },
    danger: {
      main: '',
      light: '',
      dark: '',
      hover: '',
      active: '',
      focus: ''

    }
  },
  borderRadius: {
    md: '',
    sm: '',
    lg: ''
  },
  input: {
    colors: {
      background: '',
      hover: '',
      label: '',
      placeholder: '',
      border: ''
    }
  }
}

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

Principles

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

  • Minimal
  • Useful
  • Themeable

Related

MIT License