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.
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.
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 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 : firstname.lastname@example.org.
- The definition of neumorphic effect is from an article by S Jagoor on Medium. You can see it here : https://email@example.com/design-trends-neumorphism-59a9ba9d9284
- The image in article is from https://dribbble.com/shots/9165794-Flight-Search-UI-Exploration/attachments/1208290?mode=media