DEV Community

loading...
Cover image for Why I made a React Components library based on the concept of Neumorphism?

Why I made a React Components library based on the concept of Neumorphism?

mrsaeeddev profile image Saeed Ahmad Updated on ・2 min read

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 :

Discussion (9)

pic
Editor guide
Collapse
muneebjs profile image
Muneeb Khan

Nice one!

Collapse
mrsaeeddev profile image
Collapse
navicsteinr profile image
Navicstein Rotciv

Nice, wish there's a standalone css framework like bootstrap for this

Collapse
mrsaeeddev profile image
Saeed Ahmad Author

Hey, I am going to make it a full fledged library like Material UI. Stay tuned!

Collapse
navicsteinr profile image
Navicstein Rotciv

Involve me in the project when you start, I would like to contribute too 🥰

Collapse
pkhalisoft profile image
Collapse
x1k profile image
Asaju Enitan

I'm gonna try this today, will give feedback

Collapse
manjots1607 profile image
Manjot Singh • Edited

Nice work , is this open source??? If yes, would like to contribute...

Collapse
mrsaeeddev profile image
Saeed Ahmad Author

Yeah. It's open-source. You are welcome to contribute.