DEV Community

Cover image for Neomorphism designs, UI components library
Abdelrahman Ismail
Abdelrahman Ismail

Posted on • Updated on • Originally published at ismail9k.com

Neomorphism designs, UI components library

Every while a new design trend arise and became the dominator of the shape of the period. Recently, the neomorphic design style becoming very trending and is gaining more and more popularity.

The Neomorphism Design

You can form this effect, by adding two shadows to your flat-designed elements, one is a light shadow from the top left of the element, and the other is a dark shadow towards the bottom right. the combination of both creates the effect of the elements pushing themselves through your display.

You can read more about how to apply this technic in-depth here: Design trends: Neomorphic design.

Neomorphism design components

The first time I saw this design concept, I immediately loved it. I started to apply it to some basic web components; buttons, inputs, etc..

Then I had an idea, why not create a full set of UI components based on this concept.

I reviewed the most famous frameworks and components libraries structure and concepts, to design the structure I will follow. In the end, I summed up to:

  • Each component will have five sizes (xs, sm, md, lg, xl).
  • Components size will depend on its font-size only; when change the component's font-size property, its width, height, margin, and padding will be changed respectively because they all are in em unit.
  • The grid will have also five media breaking points (xs, sm, md, lg, xl).
  • Shadows depth will have five levels, in addition to two shadows style emboss and deboss.
  • Classes naming conventions will be a modified version of SUIT naming convention
  • The components are written in Stylus because it's the best πŸ€ͺπŸ€ͺ.

After TWO days of hard work πŸ€“πŸ€“, and lots of potions coffee. I want to introduce Neomorphism, UI components library. (creative name, right? πŸ€·β€β™‚οΈπŸ€·β€β™‚οΈ)

GitHub logo ismail9k / neomorphism

UI components library in the new neomorphism design style

Final words

This project very far from completion, it still work-in-progress. I plan to include more components, and support dark-theme too, and maybe in the future expose it as React/Vuejs components. I just wanted to share it as early as possible, to gather feedback, and maybe to force myself, to dedicate more time to work on it 😭😭. Thank you for reading.

Top comments (9)

Collapse
 
jp_semery profile image
Jean-Pierre Semery • Edited

Hi,

Nice work

I'm wondering how to use the dark.
Looking at the neomorphism.css file there seems to be adark theme.

theme. I'm abe to apply a button style like this. kind of blueish but I guess the colors can be changed.

How would you apply the dark theme to the whole site?

Thanks in advance

Jean-Pierre

Collapse
 
indysigner_15 profile image
Markus Seyfferth • Edited

Amazing work, Abdelrahman!

Just shared your work on our Webdesign Trends article (in German) on DrWeb.de. Keep up the great work! πŸ™πŸ»

Collapse
 
ismail9k profile image
Abdelrahman Ismail

Wow, very appreciated. Thank you Markus.

Collapse
 
luigicampbell profile image
luigicampbell

very cool

Collapse
 
ismail9k profile image
Abdelrahman Ismail

Thank you I am glad that you liked it

Collapse
 
codebender828 profile image
Jonathan Bakebwa

Great stuff, Ismail! Your design looks good and I'm looking forward to seeing what you make of it in the future. Cheers!

Collapse
 
ismail9k profile image
Abdelrahman Ismail

Thank you for your support. Cheers!

Collapse
 
paul_melero profile image
Paul Melero

there's a typo in "Styles", should be "Stylus" ;)

Collapse
 
ismail9k profile image
Abdelrahman Ismail

Ooops, nice catch πŸ˜…πŸ˜