So, If you are a designer or a passionate front end developer, then it's more likely that you have heard about the concept of Neumorphism.

If you haven't let us first understand it:

"The neomorphic effect is a combination of the current famous flat UI and the old skeuomorphic principles! The components have a dark box-shadow on the bottom and a light box-shadow on top; the combination of both creates the effect of the elements pushing themselves through your display."

It's also called Soft UI.

What next ?

When I saw all these designs on Dribble and articles on Medium, I started thinking about it's implementation in ReactJS.

So, I started working on an awesome library called neumorphic-ui as I call it. I implemented 6 basic components in it. The components are NeuButton, NeuCard, NeuReaction, NeuHeading, NeuInput and NeuProgressBar.
If you want to see it on GitHub, just go to this link.

How to use neumorphic-ui?

I have also published it as an npm package. To use it, you just have to do npm install --save neumorphic-ui and you are there.

Contributions/Suggestions

Contributions to the library are welcome. Just pull it and make a merge request. I will review the code and then if it's up-to-the-mark, I will merge it. Also, if you can suggest something more better, just drop me a message here. My inbox is open for all of you. Also, you can send me an email on : saeed_dev@yahoo.com.

GitHub link : https://github.com/dev-saeed/neumorphic-ui
NPM Link : https://www.npmjs.com/package/neumorphic-ui
Docs Link : https://neumorphic-ui.netlify.com/

Thanks for reading this. Let's build a Neumorphic world together!

Credits :

• The definition of neumorphic effect is from an article by S Jagoor on Medium. You can see it here : https://medium.com/@s.jagoori/design-trends-neumorphism-59a9ba9d9284
• The image in article is from https://dribbble.com/shots/9165794-Flight-Search-UI-Exploration/attachments/1208290?mode=media