/morpho-ui-css

Primary LanguageHTML

Morpho-UI

Elegant, modular and easy-to-use css-utility-class-based component library

Tech Stack

Motivation

Building components repetitively is cumbersome and time-consuming. Building morpho-UI brings uniformity, reusability and less decision making in styling for all your projects. It contains the global styling which gives you variety of color choices and components like buttons, alerts are provided with 5 CTA(call to action) colors(red, green, blue, yellow, and pink).

How to install?

 <head>
 	<link rel="stylesheet" href="https://morpho-ui-css-docs.netlify.app/global/global.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>

Documentation: Link
React based version: link

React based package

Project Link: Link
It can be easily installed in any react project using npm i @launchpad5682/morpho-ui.

Components:

  • Alert
  • Avatar
  • Badge
  • Button
  • Card
  • Chips
  • Image
  • Modal
  • Snack Bar
  • Tabs
  • Typography

Color Psychology:

  • Success/peaceful optimism: green
  • Information: blue
  • Danger or focus: red
  • Warning or grab attention: yellow
  • Excitement: pink
  • Minimalistic sophistication: black

Credits