Morpho-UI

Elegant, modular and easy-to-use react-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?

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

References

• Start development server using npm start and npm run storybook.
• Bootstrapped storybook typescript using TSDX.
• Deploy Storybook using github actions.
• Altered default configuration using ts.config.js and added css imports with live changes with css link.
• User guide for TSDX React w/ Storybook.
• Made all the components accessible using index.tsx in src folder.
• Call to action color guide link.

Workflow

• Make changes, add version to the commit message to release a package.
• Make version update in package.json and push code using git push --follow-tags.