Skip to content

DEV Community

12 Gorgeous UI Components for Your Design Inspiration 🎨✨

Madza on March 10, 2022

Modern web development has shifted to component-based architecture, resulting in faster development, more control and lower maintenance costs. In t...

Read full post

Charles Robertson • Mar 11 '22

Here is a blob menu I created using SVG:

Julius (P3ntest) • Mar 14 '22

It looks very cool, but it’s way to slow. If u fix that it’s 10/10

Charles Robertson • Mar 14 '22

Do you mean, slow to load or the animation speed?
If you are talking about the latter, then that is easy to fix.
It is just a TweenMax setting. 🙏

Julius (P3ntest) • Mar 14 '22

I meant the actual animation speed, so yes that should be a super easy fix :).

Luis F. Franco • Mar 14 '22

I agree... I love it, but the animation speed is too slow. Problem is if you speed it up, maybe all the visual effects will be lost

Charles Robertson • Mar 14 '22

Yes. Exactly. If it is too fast, you might lose that blobby effect? But, it is easy to speed up, anyway…

Madza • Mar 14 '22

Thanks for the input 👍💯

Luis F. Franco • Mar 14 '22

Beautiful!

Charles Robertson • Mar 14 '22

Thanks Luis! 🙏👏🏻

Adnane Chaikhi • Mar 14 '22

amazing

Charles Robertson • Mar 15 '22

Thank you, Adnane 🙏👏🏻

Madza • Mar 12 '22

This is awesome, nice job 👍✨

Charles Robertson • Mar 12 '22

Thanks very much 🙏👏🏻

Madza • Mar 13 '22

My pleasure 💯👍

Khokon M. • Mar 19 '22

Good one!

Gloria Maldonado ✪ • Mar 11 '22

Thanks for sharing them 😍

Madza • Mar 11 '22

Always my pleasure! 👍💯

z2lai • Mar 11 '22

Lovely! The Jello Tab Bar is my favourite, simple yet satisfying. The 3D orange switch is a little too realistic for me, almost got dizzy watching it lol.

mbakoG90210 • Mar 12 '22

Same here... I'm actually building my own personal blog site for none techy things that don't need to be on dev.to or medium or hashnode so will definitely be considering this as a simple implementation of a topic tab switcher

z2lai • Mar 13 '22

Bring it to life! I rarely see these kind of cool animations out in the wild.

Madza • Mar 13 '22

Excatly 💯👍

Madza • Mar 13 '22

Good luck wit it 💯👍

Madza • Mar 12 '22

Thanks a lot 👍💯

Jackson Kasi • Mar 11 '22

wow. nice😎

Madza • Mar 11 '22

Thank you 🙏💖

Medea • Mar 11 '22

Woah these are cool!

Madza • Mar 12 '22

Thanks a lot 👍💯

Medea • Mar 12 '22

np! really liked them

Madza • Mar 12 '22

Thanks a lot! 👍😉

Jenuel Oras Ganawed • Mar 13 '22

thanks for sharing this stuff,,, i like the animated tab bar stuff,, I like the idea when clicking on menus,, I think Im going to use it on my portfolio website...

Madza • Mar 13 '22

Happy to help! 💯👍

Jenuel Oras Ganawed • Mar 13 '22

awesome!

Madza • Mar 13 '22

Thanks! 👍💯

Jackson Miller • Mar 15 '22

Greenlight is a company that can transform your kids into individuals with adequate financial knowledge. They have helped bind kids with a tool where they can learn all about investing and spending as per their savings. These savings and spendings are controlled and overseen by their guardians and parents. If you want to help a kid out with the same, you can use the greenlight promo code to get the debit card. It will come as a discounted purchase!

optimisedu • Mar 27 '22

While a lot of these are very cool most aren't even mobile accessable although in the main they are responsive. I love CSS art but that really is what they are.

The simple CSS loaders is great though, and thank you for posting these little bits of inspiration

Madza • Mar 27 '22

My pleasure 💯👍

Sahir khan • Mar 11 '22

Out of the box use of CSS, great 👍.

Madza • Mar 11 '22

Awesome to hear, thanks for checking out 👍🙏

Thomas Hansen • Mar 15 '22

Do you have something amazing for "user registrations"? Preferably something in Angular. I am writing a series about creating a "register users on your site" and my next article will be about its Angular frontend parts ...

Madza • Mar 15 '22

Thanks for the feedback, might do some in future 😉👍

Mudit Mishra • Mar 14 '22

Thanks for sharing✨🙏🏼

Madza • Mar 14 '22

Means a lot 👍💯

Ivaylo • Mar 14 '22

Great Article!

Madza • Mar 14 '22

Thanks a lot 👍😉

Gustavo Scarpim • Mar 12 '22

Perfect!

Madza • Mar 12 '22

Thanks a lot! 💖

Levin • Mar 14 '22

Helpful articles.
Thanks

Madza • Mar 14 '22

Means a world, thanks 💯

drmikecrowe • Mar 11 '22

I wonder if these might make sense to be in a lit element that you could import into a project easily?

Madza • Mar 12 '22

The code is available, so you could implement that 😉👍

Andrew Baisden • Mar 13 '22

Stunning thanks for sharing!

Madza • Mar 13 '22

My pleasure, Andrew 💯👍

Madza • Mar 13 '22

Feels so great to share with you 💯👍

Ahmed R. J. Alsaedi • Mar 12 '22

All of them are awsome, thanks for sharing, I adore the glowing icon and the jelly bar.

Madza • Mar 13 '22

My pleasure to help 💯👍

Vfunnyguy • Mar 14 '22

wow awesome ,thank for sharing

Madza • Mar 14 '22

Thanks a lot 💯👍

Sahan • Mar 12 '22

These are amazing! 😻

Madza • Mar 12 '22

Thank you 👍😉

CoderLegion • Mar 11 '22

Thanks for info

Madza • Mar 11 '22

My pleasure 👍🙏

FrankPohl • Mar 11 '22

I cannot use them in my favorite tech stack but I really like them.

Madza • Mar 11 '22

My pleasure to provide 👍🙏

Luis F. Franco • Mar 14 '22

Excelent examples, thanks a lot!

Madza • Mar 14 '22

My pleasure 💯👍

Pranay Raj • Mar 13 '22

This was awesome!!

Madza • Mar 13 '22

My pleasure 👍😉

Renan Franca • Mar 11 '22

The number 11. The feedback reaction is insane! 😍

Madza • Mar 11 '22

Love it so much, too 😍✨

LuCaS • Mar 12 '22 • Edited

Nice! Thanks for that set of amazing UI

Madza • Mar 13 '22

Thanks 😉👍

vishal • Mar 13 '22

Nice

Madza • Mar 13 '22

Thanks a lot 👍😉

Cao Quốc Minh • Jul 19 '22

Hey bro, so beautiful.

Madza • Jul 19 '22

Thanks a lot! 👍💯✨

Petar Stoyanov • Mar 13 '22

Really good finds! Thanks for sharing them. 🙌 🔥 👌

Madza • Mar 14 '22

My pleasure 👍💯

Amir-cahyadi • Mar 11 '22

❤️👍

Madza • Mar 11 '22

Thanks a lot 🙏💖

Madza • Mar 11 '22

Thanks for checking it out 👍😉

Madza • Mar 11 '22

Feel so great to help ✨👍😉

mohdsalah181 • Mar 13 '22

Thanks ... Very usefull

Madza • Mar 14 '22

Awesome you liked 👍💯

Arun Kumar • Mar 14 '22

awesome stuff man...

Madza • Mar 14 '22

Thanks a lot 🙏👍

Bevis • Mar 16 '22

soooo cool!

Madza • Mar 16 '22

Thanks a lot 👍💯

Comment deleted

Madza • Mar 14 '22

Happy to help 💯✨

Chris Mcdonald • Mar 14 '22

Awesome post! Thanks for sharing.

Madza • Mar 14 '22

My pleasure 💯✨

Jei • Mar 16 '22

Awesome

Madza • Mar 16 '22

Thanks! 🤩😊

Federico Roman • Mar 14 '22

Pretty cool resources!

Madza • Mar 14 '22

Thanks a lot 💯👍

Nana Quame Vybes • Mar 12 '22

Thanks man.

Madza • Mar 13 '22

Glad you liked 😉👍

Samuel Ige • Mar 12 '22

Amazing 👌🏾

Madza • Mar 13 '22

My pleasure 😉👍

Javad Gheisari • Mar 16 '22

nice, thanks for sharing

Madza • Mar 16 '22

My pleasure 🙏❤

Rasma Raj • Mar 14 '22

Thank you so much..🙏

Madza • Mar 15 '22

My pleasure 💯👍

Román APF • Mar 15 '22

Super Nice!

Madza • Mar 15 '22

Thanks a lot 👍💯

Thomas Hansen • Mar 13 '22

Nice, loved the glowing icons ^_^

Madza • Mar 13 '22

Awesome to hear 👍💯

kipronorugut • Mar 13 '22

Thanks for sharing

Madza • Mar 13 '22

My pleasure! 👍💯

SYED MD HASNAIN JAH • Apr 13 '22

Amazing content mate, thanks a ton

Madza • Apr 13 '22

My pleasure to help 👍💯

aspiringDev22 • Apr 6 '22

Wow , very helpful man !

Madza • Apr 6 '22

Happy to help 😉

Madza • Mar 16 '22

Thanks a lot 💯👍

Madza • Mar 13 '22

Thanks a lot 💯👍

KienHee • Mar 11 '22

Wow interesting !